The dna-engine 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
The supplied 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
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:
✅ To-Do List Application Example
Looking under the hood of a simple to-do list application is a good way to quickly
understand a library.
Experiment with the dna-engine to-do list application at:
📘 Book Finder Example
dna-engine is designed work well in REST applicatons.
This simple example shows results from the Google Books API being fed into the
Experiment with the Book Finder example at:
For a step-by-step explanation of the code, check out the Tutorial to Build a REST-driven Search Component.
☯️ Live Model Example
dna-engine keeps track of the data model (the "M" in MVC) and updates the UI as the user
changes the model.
Interact with the live model at:
- Independent: Be web framework agnostic.
- Valid: Templates should be real HTML that pass W3C validation.
- Functional: Iteration is best done with
data arrays not messy template
- Stealth: Zero setup until data is pushed (can be after page load).
- Data: Stay away from serialization/deserialization and HTML strings.
dna-engine is all about keeping it simple.