forked from mystiq/hydrogen-web
cleanup template code
This commit is contained in:
parent
468af4755b
commit
bec7720c42
1 changed files with 42 additions and 32 deletions
|
@ -13,7 +13,10 @@ function classNames(obj, value) {
|
||||||
}
|
}
|
||||||
}, "");
|
}, "");
|
||||||
}
|
}
|
||||||
/*
|
/**
|
||||||
|
Bindable template. Renders once, and allows bindings for given nodes. If you need
|
||||||
|
to change the structure on a condition, use a subtemplate (if)
|
||||||
|
|
||||||
supports
|
supports
|
||||||
- event handlers (attribute fn value with name that starts with on)
|
- event handlers (attribute fn value with name that starts with on)
|
||||||
- one way binding of attributes (other attribute fn value)
|
- one way binding of attributes (other attribute fn value)
|
||||||
|
@ -140,6 +143,16 @@ export default class Template {
|
||||||
const node = document.createElement(name);
|
const node = document.createElement(name);
|
||||||
|
|
||||||
if (attributes) {
|
if (attributes) {
|
||||||
|
this._setNodeAttributes(node, attributes);
|
||||||
|
}
|
||||||
|
if (children) {
|
||||||
|
this._setNodeChildren(node, children);
|
||||||
|
}
|
||||||
|
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
_setNodeAttributes(node, attributes) {
|
||||||
for(let [key, value] of Object.entries(attributes)) {
|
for(let [key, value] of Object.entries(attributes)) {
|
||||||
const isFn = typeof value === "function";
|
const isFn = typeof value === "function";
|
||||||
// binding for className as object of className => enabled
|
// binding for className as object of className => enabled
|
||||||
|
@ -157,7 +170,7 @@ export default class Template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (children) {
|
_setNodeChildren(node, children) {
|
||||||
if (!Array.isArray(children)) {
|
if (!Array.isArray(children)) {
|
||||||
children = [children];
|
children = [children];
|
||||||
}
|
}
|
||||||
|
@ -172,9 +185,6 @@ export default class Template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
_addReplaceNodeBinding(fn, renderNode) {
|
_addReplaceNodeBinding(fn, renderNode) {
|
||||||
let prevValue = fn(this._value);
|
let prevValue = fn(this._value);
|
||||||
let node = renderNode(null);
|
let node = renderNode(null);
|
||||||
|
@ -215,7 +225,7 @@ export default class Template {
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const tag of TAG_NAMES) {
|
for (const tag of TAG_NAMES) {
|
||||||
Template.prototype[tag] = function(...params) {
|
Template.prototype[tag] = function(attributes, children) {
|
||||||
return this.el(tag, ... params);
|
return this.el(tag, attributes, children);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue