The project is open source and available for free. The code is hosted on GitHub under the MIT License.
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:
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:
- Be completely web framework agnostic
- Templates should be real HTML that validate
- 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