dna.js Semantic Templates
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:
Designate HTML elements as templates with the
dna-template class, and put
the templates directly into the HTML of your web page. Use each element's ID to
indicate the name of the template. Enclose data field names (object properties) in
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.
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.
Clones can alternatively be generated by providing a URL to a REST resource.
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
Submit bugs, feature requests, and questions at: github.com/dnajs/dna.js/issues