Skip to content

Instantly share code, notes, and snippets.

@dennissterzenbach
Forked from PaulKinlan/applyTemplate.js
Created July 4, 2017 17:32
Show Gist options
  • Save dennissterzenbach/23c9492486449e8607e06970e3f86fa7 to your computer and use it in GitHub Desktop.
Save dennissterzenbach/23c9492486449e8607e06970e3f86fa7 to your computer and use it in GitHub Desktop.
Simple Templating
const applyTemplate = (templateElement, data) => {
const element = templateElement.content.cloneNode(true);
const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, () => NodeFilter.FILTER_ACCEPT);
while(treeWalker.nextNode()) {
const node = treeWalker.currentNode;
for(let bindAttr in node.dataset) {
let isBindableAttr = (bindAttr.indexOf('bind_') == 0) ? true : false;
if(isBindableAttr) {
let dataKey = node.dataset[bindAttr];
let bindKey = bindAttr.substr(5);
node[bindKey] = data[dataKey];
}
}
}
return element;
};
<template id='itemTemplate'>
<div class="item" data-bind_id='guid'>
<h3><span data-bind_inner-text='title'></span> (<a data-bind_href='link'>#</a>)</h3>
<div data-bind_inner-text='pubDate'></div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment