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
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-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:
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-engine to-do list application 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 (no need to call
dna-engine is all about keeping it simple.
Questions and comments
Tweet your question or comment with #dna-engine or submit an issue on GitHub.