foreach directive

simple implementation of generating DOM structure using a template and an array of data.

by Richard Hunter

HTML

<ul id="foo">
    <li ro-text="name">template</li>
</ul>
<ul id="bar"></ul>

CSS

#foo {
    color : red;
}

#bar { 
    color : blue;
}

JavaScript

var filter = Array.prototype.filter;

var dataSource = [
    { name : "apple"},
    { name : "banana" },
    { name : "pineapple" }
];

function createTemplateNode(el) {
    
    var frag = document.createDocumentFragment();
    Array.prototype.forEach.call(el.children, function(el) {
        frag.appendChild(el.cloneNode(true));
    });
    return frag;
}
function processData(templateNode, fragment) {
    return function(scope) {
        var clone = templateNode.cloneNode(true);
        var roTextEl = clone.querySelector('[ro-text]');
        var propName = roTextEl.getAttribute('ro-text');
        var data = scope[propName];
        roTextEl.innerHTML = data;
        fragment.appendChild(clone);
    }
}

var foo = document.querySelector('#foo');
var bar = document.querySelector('#bar');
var templateNode = createTemplateNode(foo);
var tempContainer = document.createDocumentFragment();
dataSource.forEach(processData(templateNode, tempContainer));
bar.appendChild(tempContainer);