An uncomplicated user interface library for building data-driven semantic templates

License:MIT npm Quality Vulnerabilities Hits Build

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>
   Author: <cite>~~author~~</cite>

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>

Need to clone the template multiple times?  Simply pass an array of data objects into the dna.clone() function.

2. Additional Information

dna.js is open source under the MIT License.  The website and documentation are published under the CC BY-SA 4.0 license.

• Released: May 04, 2020, 01:50 PM


Author: dnajs
Item was Featured Author was Featured Bought between 100 and 500 items Referred more than 1000 members Author had a Free File of the Month Contributed a Blog Post Helped protect FrontendFun against copyright violations Reviewer FrontendFun Developer Site Administrator Moderator Blog Editor
🧬 An uncomplicated user interface library for building data-driven semantic templates size
git clone https://github.com/dnajs/dna.js.git