Created
October 12, 2016 21:00
-
-
Save anonymous/8146e35c41eba534f2f5e14805dd54ab to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/wujofeqasi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<div id="root"></div> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
'use strict'; | |
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | |
var models = [{ | |
title: 'lake', | |
url: "http://noorimages.com/wp-content/uploads/2016/08/KOY2015NGMC1010-0015-1-280x186.jpg", | |
nb: 0 | |
}, { | |
title: 'woemn', | |
url: 'http://noorimages.com/wp-content/uploads/2016/08/HAR2009004C-0002-265x186.jpg', | |
nb: 0 | |
}]; | |
function create(models) { | |
return div.apply(undefined, [{}].concat(_toConsumableArray(models.map(function (model) { | |
return div({}, img({ src: model.url }), h2({ textContent: model.title }), h4({ textContent: model.nb, onclick: increment.bind(null, model) })); | |
})))); | |
} | |
function div(attrs) { | |
for (var _len = arguments.length, childs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | |
childs[_key - 1] = arguments[_key]; | |
} | |
return h.apply(undefined, ['DIV', attrs].concat(childs)); | |
} | |
function img(attrs) { | |
for (var _len2 = arguments.length, childs = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { | |
childs[_key2 - 1] = arguments[_key2]; | |
} | |
return h.apply(undefined, ['IMG', attrs].concat(childs)); | |
} | |
function h2(attrs) { | |
for (var _len3 = arguments.length, childs = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { | |
childs[_key3 - 1] = arguments[_key3]; | |
} | |
return h.apply(undefined, ['H2', attrs].concat(childs)); | |
} | |
function h4(attrs) { | |
for (var _len4 = arguments.length, childs = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) { | |
childs[_key4 - 1] = arguments[_key4]; | |
} | |
return h.apply(undefined, ['H4', attrs].concat(childs)); | |
} | |
function increment(model) { | |
model.nb += 1; | |
rerender(); | |
} | |
function h(type) { | |
var attrs = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; | |
var elm = document.createElement(type); | |
Object.assign(elm, attrs); | |
for (var _len5 = arguments.length, childs = Array(_len5 > 2 ? _len5 - 2 : 0), _key5 = 2; _key5 < _len5; _key5++) { | |
childs[_key5 - 2] = arguments[_key5]; | |
} | |
childs.forEach(function (child) { | |
elm.appendChild(child); | |
}); | |
return elm; | |
} | |
function render(root, el) { | |
while (root.firstChild) { | |
root.removeChild(root.firstChild); | |
} | |
root.appendChild(el); | |
} | |
function rerender() { | |
return render(document.querySelector('#root'), create(models)); | |
} | |
render(document.querySelector('#root'), create(models)); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
const models = [{ | |
title: 'lake', | |
url:"http://noorimages.com/wp-content/uploads/2016/08/KOY2015NGMC1010-0015-1-280x186.jpg", | |
nb: 0 | |
}, { | |
title: 'woemn', | |
url:'http://noorimages.com/wp-content/uploads/2016/08/HAR2009004C-0002-265x186.jpg', | |
nb: 0 | |
}]; | |
function create(models) { | |
return ( | |
div({}, | |
...models.map(model => { | |
return ( | |
div({}, | |
img({src: model.url}), | |
h2({textContent: model.title}), | |
h4({textContent: model.nb, onclick: increment.bind(null, model)})) | |
); | |
}) | |
) | |
); | |
} | |
function div(attrs, ...childs){ | |
return h('DIV', attrs, ...childs); | |
} | |
function img(attrs, ...childs){ | |
return h('IMG', attrs, ...childs); | |
} | |
function h2(attrs, ...childs){ | |
return h('H2', attrs, ...childs); | |
} | |
function h4(attrs, ...childs){ | |
return h('H4', attrs, ...childs); | |
} | |
function increment(model){ | |
model.nb += 1; | |
rerender(); | |
} | |
function h(type, attrs={}, ...childs) { | |
const elm = document.createElement(type); | |
Object.assign(elm, attrs); | |
childs.forEach((child)=> { | |
elm.appendChild(child); | |
}); | |
return elm; | |
} | |
function render(root, el){ | |
while( root.firstChild) { | |
root.removeChild( root.firstChild); | |
} | |
root.appendChild(el); | |
} | |
function rerender(){ | |
return render(document.querySelector('#root'), create(models)); | |
} | |
render(document.querySelector('#root'), create(models)); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | |
var models = [{ | |
title: 'lake', | |
url: "http://noorimages.com/wp-content/uploads/2016/08/KOY2015NGMC1010-0015-1-280x186.jpg", | |
nb: 0 | |
}, { | |
title: 'woemn', | |
url: 'http://noorimages.com/wp-content/uploads/2016/08/HAR2009004C-0002-265x186.jpg', | |
nb: 0 | |
}]; | |
function create(models) { | |
return div.apply(undefined, [{}].concat(_toConsumableArray(models.map(function (model) { | |
return div({}, img({ src: model.url }), h2({ textContent: model.title }), h4({ textContent: model.nb, onclick: increment.bind(null, model) })); | |
})))); | |
} | |
function div(attrs) { | |
for (var _len = arguments.length, childs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | |
childs[_key - 1] = arguments[_key]; | |
} | |
return h.apply(undefined, ['DIV', attrs].concat(childs)); | |
} | |
function img(attrs) { | |
for (var _len2 = arguments.length, childs = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { | |
childs[_key2 - 1] = arguments[_key2]; | |
} | |
return h.apply(undefined, ['IMG', attrs].concat(childs)); | |
} | |
function h2(attrs) { | |
for (var _len3 = arguments.length, childs = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { | |
childs[_key3 - 1] = arguments[_key3]; | |
} | |
return h.apply(undefined, ['H2', attrs].concat(childs)); | |
} | |
function h4(attrs) { | |
for (var _len4 = arguments.length, childs = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) { | |
childs[_key4 - 1] = arguments[_key4]; | |
} | |
return h.apply(undefined, ['H4', attrs].concat(childs)); | |
} | |
function increment(model) { | |
model.nb += 1; | |
rerender(); | |
} | |
function h(type) { | |
var attrs = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; | |
var elm = document.createElement(type); | |
Object.assign(elm, attrs); | |
for (var _len5 = arguments.length, childs = Array(_len5 > 2 ? _len5 - 2 : 0), _key5 = 2; _key5 < _len5; _key5++) { | |
childs[_key5 - 2] = arguments[_key5]; | |
} | |
childs.forEach(function (child) { | |
elm.appendChild(child); | |
}); | |
return elm; | |
} | |
function render(root, el) { | |
while (root.firstChild) { | |
root.removeChild(root.firstChild); | |
} | |
root.appendChild(el); | |
} | |
function rerender() { | |
return render(document.querySelector('#root'), create(models)); | |
} | |
render(document.querySelector('#root'), create(models)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment