Skip to content

Instantly share code, notes, and snippets.

@rndme
Created January 28, 2016 07:45
Show Gist options
  • Save rndme/0badd138f9bda10de327 to your computer and use it in GitHub Desktop.
Save rndme/0badd138f9bda10de327 to your computer and use it in GitHub Desktop.
ES6 micro templater
var r=[
{url:"/Steel/Steel%20Band%20Music%20Of%20The%20Carribbean-09-Native%20Mambo.mp3",
name:"Steel Band Music Of The Carribbean-09-Native Mambo",src:"ZM3xplefSl"},
{url:"/Steel/Steel%20Band%20Music%20Of%20The%20Carribbean-08-Jungle.mp3",
name:"Steel Band Music Of The Carribbean-08-Jungle",src:"ZM3xplefSl"},
{url:"/Steel/Steel%20Band%20Music%20Of%20The%20Carribbean-07-LaPaloma.mp3",
name:"Steel Band Music Of The Carribbean-07-LaPaloma",src:"ZHdf478Dwd"},
{url:"/Steel/Steel%20Band%20Music%20Of%20The%20Carribbean-06-Zulu%20Chant.mp3",
name:"Steel Band Music Of The Carribbean-06-Zulu Chant",src:"ZM3xplefSl"},
{url:"/Steel/Steel%20Band%20Music%20Of%20The%20Carribbean-05-Spear%20Dance.mp3",
name:"Steel Band Music Of The Carribbean-05-Spear Dance",src:"ZHdf478Dwd"},
{url:"/Steel/Steel%20Band%20Music%20Of%20The%20Carribbean-04-Out%20Of%20My%20Dreams.mp3",
name:"Steel Band Music Of The Carribbean-04-Out Of My Dreams",src:"ZHdf478Dwd"}
],
render = new Template( r[0], "<li title=${src} class='${this.type}'> ${name} </li>" );
function Template(objData, strTemplate){ //returns a new template function to match the data shape
return Function("OBJ", " var " +
Object.keys(objData)
.filter(a=>strTemplate.indexOf(a)!==-1) // optimize by eliminating shadows for un-used vars
.map(a=> a+"=OBJ."+a ) // assign all keys in objData to vars
.join(",\n ") +
";\n return `"+strTemplate+"`;"); // wrap template string around template contents.
}
// test tempalter against the demo data:
"<ul>"+ r.map(render, {type: "item"}).join("\n")+ "</ul>" ==
`<ul><li title=ZM3xplefSl class='item'> Steel Band Music Of The Carribbean-09-Native Mambo </li>
<li title=ZM3xplefSl class='item'> Steel Band Music Of The Carribbean-08-Jungle </li>
<li title=ZHdf478Dwd class='item'> Steel Band Music Of The Carribbean-07-LaPaloma </li>
<li title=ZM3xplefSl class='item'> Steel Band Music Of The Carribbean-06-Zulu Chant </li>
<li title=ZHdf478Dwd class='item'> Steel Band Music Of The Carribbean-05-Spear Dance </li>
<li title=ZHdf478Dwd class='item'> Steel Band Music Of The Carribbean-04-Out Of My Dreams </li></ul>`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment