dna.js Semantic Templates

An uncomplicated user interface library

---

dna.js is an easy-to-use UI library for jQuery enabling developers to rapidly build maintainable JavaScript applications.

Current release: v0.4.3

1. Bookstore Example

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 ~~.

a) HTML for book template

<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 will be used to populate the fields of the template.

b) JavaScript call to add book node

dna.clone('book', { title: 'The DOM', author: 'Jan' });

The new element is a clone, and it is appended to the template's parent element (the original template is detached from the DOM and kept for additional cloning).

c) Resulting HTML with clone

<h1>Featured Books</h1>
<div class=book>
   <div>Title:  <span>The DOM</span></div>
   <div>Author: <span>Jan</span></div>
</div>

Clones can alternatively be generated by providing a URL to a REST resource.

d) JavaScript call to load data from a REST call

dna.rest.get('book', 'http://dnajs.org/rest/book/3');

2. Additional Information

• 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 an open source project dual-licensed under MIT/GPLv3 with the website and documentation licensed under CC BY-SA 4.0.