The dna.js project is open source under the MIT License and hosted on GitHub.
Add the class
dna-template to an element to turn it into a template, and
give the template a name using the
Put the template directly into the HTML of your web page, and specify where data fields
(object properties) are to be inserted into the template by enclosing the field names in
dna.clone() function to insert a copy of the
template into the DOM. The supplied JSON data object is used to
populate the fields of the template.
The new element is a clone, and it is placed into the DOM where the template was located. The original template is detached from the DOM and kept for additional cloning.
Try It Out
Click "Add a Book" to trigger an event that calls the
dna.clone() function. Click "Clear List" to call the
dna.empty() function, which deletes all the clones previously
created from the template.
To see all the pieces running together, check out the standalone example:
dna.js keeps track of the data model (the "M" in MVC) and updates the UI as the user changes
Interact with the live model at:
To-Do List Application
Looking under the hood of a simple to-do list application is a good way to quickly
understand a library.
Experiment with the dna.js to-do list application at:
- Be completely web framework agnostic
- Templates should be real HTML that pass W3C validatation
- Templates can be inline (no need for separate template files)
- Iteration is best done with data arrays not messy
- Zero setup until data is pushed (can be after page load)
- Stay away from serialization/deserialization (no need to call the