Wrapping an existing DOM into an Enyo Kind instance
Code designed to grab an existing DOM element, and use it as the node for a new Enyo Kind.
by EDWIN MAURICIO QUISHPE MALDONADO
HTML
<div id="appHolder">
<div id="myDiv" name="myDiv" class="green">This is myDiv</div>
<br />
<div id="grap" name="wrap" class="blue">Otra div</div>
</div>
CSS
.green {
color:green
}
.red {
color: darkred
}
JavaScript
enyo.domToEnyoNode = {
loadNode: function (node, parent, enyoOptions) {
var props = {},
map = {
id: 'id',
name: 'name',
classList: 'classes',
type: 'type',
innerText: 'content'
},
result = {},
kind = '';
enyo.forEach(Object.keys(map), function (key) {
if (node[key]) {
if (typeof map[key] === 'string') {
if (node[key]) {
props[map[key]] = node[key];
}
} else {
enyo.forEach(map[key], function (propertyName) {
if (node[key]) {
props[propertyName] = node[key];
}
});
}
}
});
props.node = node;
props.owner = parent;
props.generated = true;
props._needsRender = false;
if (enyoOptions) {
enyo.mixin(props, enyoOptions, true);
}
if (enyoOptions) {
kind = enyoOptions.kind || enyoOptions.kindName || 'Control';
}
result = parent.createComponent({
kind: kind || 'Control'
}, props);
return result;
}
};
var holder = new enyo.Control();
enyo.domToEnyoNode.loadNode(enyo.dom.byId('myDiv'), holder, {
kindName: 'Control'
});
enyo.$.myDiv.setContent('Previously: ' + enyo.$.myDiv.getContent());
console.log(enyo.$.myDiv);
enyo.$.myDiv.addContent ('Now: nope')
enyo.$.myDiv.setClasses('red');