Skip to content

Instantly share code, notes, and snippets.

@simevidas
Forked from PaulKinlan/applyTemplate.js
Created July 5, 2017 02:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simevidas/4166fe8db3e2550841523578f0c2ef54 to your computer and use it in GitHub Desktop.
Save simevidas/4166fe8db3e2550841523578f0c2ef54 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) {
if (bindAttr.startsWith('bind_')) {
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