dna.js
An uncomplicated user interface library for building data-driven semantic templates
dna.js is a lightweight easy-to-use UI library enabling developers to rapidly build maintainable JavaScript applications.
1. Bookstore Example
Designate templates with the dna-template
class, and put the templates directly into the HTML
of your web page. Use the element's id
to indicate the name of the template.
Enclose data fields in double tildes ~~
.
a) HTML for book template
<h1>Featured Books</h1>
<div id=book class=dna-template>
<h2>~~title~~</h2>
Author: <cite>~~author~~</cite>
</div>
Then call the dna.clone()
function to insert a copy of the template into the DOM. The
supplied JSON data object populates the fields of the template.
b) JavaScript call to add book node
dna.clone('book', { title: 'The DOM', author: 'Jan' });
The new clone element replaces the template. The original template is detached from the DOM and kept for additional cloning.
c) Resulting HTML with clone
<h1>Featured Books</h1>
<div class=book>
<h2>The DOM</h2>
Author: <cite>Jan</cite>
</div>
Need to clone the template multiple times? Simply pass an array of data objects into the
dna.clone()
function.
2. Additional Information
- https://dnajs.org (see the "Try it out" section for an interactive example)
- Sample To-Do Application (jsfiddle)
- Introduction to dna.js (YouTube)
- Documentation
- Release Notes
3. Contributor Notes
To be a contributor, fork the project and run the commands npm install
and npm test
on your
local clone. Make your edits and rerun the tests. Pull requests welcome.
Pull requests (PRs) should not update the version
number in package.json or any files in the
dist
folder. The version
number and dist
files are all updated as part of the release
process.
Issues labeled "good first issue" make it easy for first time contributors to participate. Only submit a PR for one of these issues if you're new to this project.
Feel free to submit questions at:
github.com/dnajs/dna.js/issues
dna.js is open source under the MIT License. The website and documentation are published under the CC BY-SA 4.0 license.