All Projects â†’ dnajs â†’ Dna.js

dnajs / Dna.js

Licence: mit
🧬 An uncomplicated user interface library for building data-driven semantic templates

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Dna.js

shaven
DOM building utility & Template engine based on JsonML + syntax sugar
Stars: ✭ 66 (-42.11%)
Mutual labels:  template-engine, dom
Cash
An absurdly small jQuery alternative for modern browsers.
Stars: ✭ 5,714 (+4912.28%)
Mutual labels:  jquery, dom
Js Tracker
A chrome extension tracks front-end JavaScript that uses DOM / jQuery APIs to manipulate html dom elements (e.g., change style, attach event listener) at runtime.
Stars: ✭ 387 (+239.47%)
Mutual labels:  jquery, dom
Jquery Xpath
jQuery XPath plugin (with full XPath 2.0 language support)
Stars: ✭ 173 (+51.75%)
Mutual labels:  jquery, dom
Vent
jQuery inspired DOM events library
Stars: ✭ 30 (-73.68%)
Mutual labels:  jquery, dom
Phantomas
Headless Chromium-based web performance metrics collector and monitoring tool
Stars: ✭ 2,191 (+1821.93%)
Mutual labels:  jquery, dom
Cheerio
Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
Stars: ✭ 24,616 (+21492.98%)
Mutual labels:  jquery, dom
Shoestring
A lightweight, simple DOM utility made to run on a tight budget.
Stars: ✭ 447 (+292.11%)
Mutual labels:  jquery, dom
Domtastic
Small, fast, and modular DOM and event library for modern browsers.
Stars: ✭ 763 (+569.3%)
Mutual labels:  jquery, dom
Sinuous
🧬 Light, fast, reactive UI library
Stars: ✭ 740 (+549.12%)
Mutual labels:  jamstack, dom
Femtojs
femtoJS - Really small JavaScript (ES6) library for DOM manipulation.
Stars: ✭ 122 (+7.02%)
Mutual labels:  jquery, dom
Domquery
PHP library for easy 'jQuery like' DOM traversing and manipulation.
Stars: ✭ 84 (-26.32%)
Mutual labels:  jquery, dom
Tempy
Python Object Oriented Html Templating System
Stars: ✭ 126 (+10.53%)
Mutual labels:  dom, template-engine
modulor-html
Missing template engine for Web Components
Stars: ✭ 36 (-68.42%)
Mutual labels:  template-engine, dom
Arrive
Watch for DOM elements creation and removal
Stars: ✭ 703 (+516.67%)
Mutual labels:  jquery, dom
Nito
A jQuery library for building user interfaces
Stars: ✭ 56 (-50.88%)
Mutual labels:  jquery, dom
Gdb
Generic Data Binder (GDB) for jQuery is a framework agnostic and extremely easy to use 2 way data binder. GDB binds views and models in realtime with live two-way binding and no hefty framework necessary.
Stars: ✭ 90 (-21.05%)
Mutual labels:  jquery, template-engine
Flippy.js
FLIP animation helper; animate DOM changes with ease
Stars: ✭ 110 (-3.51%)
Mutual labels:  dom
Clone Section Of Form Es6 Or Jquery
Now on npm. Using vanilla JavaScript (ES6) or jQuery to duplicate a section of a form, maintaining accessibility (a11y).
Stars: ✭ 112 (-1.75%)
Mutual labels:  jquery
Goalprogress
💯 Animated progress bar using jQuery to show how close you are to reaching your goal.
Stars: ✭ 109 (-4.39%)
Mutual labels:  jquery

dna.js

logo

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

License:MIT npm Size Quality Vulnerabilities Hits Build 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>
   <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

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.



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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].