dna.js is the world's easiest to use DOM templating engine.
Designate DNA templates with the dna-template
class, and put the templates directly into the HTML of your web page. Use the element's id
to indicate the name of the template. Enclose data fields in DNA strands (double tildes).
<div>
<h2>Featured Books</h2>
<div id=book class=dna-template>
<div>Title: <span>~~title~~</span></div>
<div>Author: <span>~~author~~</span></div>
</div>
</div>
Then call the dna.clone()
function to insert a copy of the template into the DOM. The supplied JSON data object will be used to populate the fields of the template.
dna.clone('book', { title: 'The DOM', author: 'Jan' });
The new element is a DNA clone, and it is appended to the template's parent element (the original template is detached from the DOM and kept for additional cloning).
<div>
<h2>Featured Books</h2>
<div id=book class=dna-clone>
<div>Title: <span>The DOM</span></div>
<div>Author: <span>Jan</span></div>
</div>
</div>
Clones can alternatively be generated by providing a URL to a REST resource.
dna.load('book', 'http://dnajs.org/rest/book/3');
- dnajs.org — (see the "Try It Out" section for a live example)
- Manual
- Release Notes