An uncomplicated user interface library for building data-driven semantic templates
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
Featured Books~~title~~Author: ~~author~~
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.
The new clone element replaces the template. The original template is detached from the DOM and kept for additional cloning.
c) Resulting HTML with clone
Featured BooksThe DOMAuthor: Jan
Need to clone the template multiple times? Simply pass an array of data objects into the
2. Additional Information
- https://dnajs.org (see the "Try it out" section for an interactive example)
- Sample To-Do Application (jsfiddle)
- Introduction to dna.js (YouTube)
- Release Notes