An uncomplicated user interface library for semantic templates
dna.js is an easy-to-use UI library for jQuery enabling developers to rapidly build maintainable JavaScript applications.
Designate 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 double tildes ~~
.
<h1>Featured Books</h1>
<div id=book class=dna-template>
<div>Title: <span>~~title~~</span></div>
<div>Author: <span>~~author~~</span></div>
</div>
Then call the dna.clone()
function to insert a copy of the template into the DOM. The
supplied JSON data object populates the fields of the template.
dna.clone('book', { title: 'The DOM', author: 'Jan' });
The new clone element replaces the template. The original template is detached from the DOM and kept for additional cloning.
<h1>Featured Books</h1>
<div class=book>
<div>Title: <span>The DOM</span></div>
<div>Author: <span>Jan</span></div>
</div>
Need to clone the template multiple times? Simply pass an array of data objects into the
dna.clone()
function.
- dnajs.org (see the "Try It Out" section for a live example)
- Sample To-Do Application (jsfiddle)
- Introduction to dna.js (YouTube)
- Documentation
- Release Notes
dna.js is open source under the MIT License. The website and documentation are published under the CC BY-SA 4.0 license.