http://dnajs.org
Introduction to dna.js
Video ~~ Transcript

1) Welcome to the introduction to dna.js.  dna.js is an open source UI library for building semantic templates that convert JSON data into dynamically generated DOM elements.

2) To illustrate how to use dna.js we will convert a very simple static HTML page that displays the title and author of two books into a page with a data-driven semantic template that displays books stored in a JavaScript array.

3) Before we get going, we need to load the jQuery and dna.js libraries.  Leveraging a CDN (Content Delivery Network), we can do this with 3 lines of HTML.  In the HEAD section, add a LINK tag to the CSS file for dna.js.  Then just before the closing BODY tag, load the JavaScript file for jQuery and the JavaScript file for dna.js.

4) Now we can convert the static HTML into a template.  To build the template, we only need HTML for one book.  So, we can delete the other book.  Name the template with the ID attribute, and in this case the name of the template will be "book".  We designate the element as a template by adding the class "dna-template".

5) Next, we inject data fields into the template by wrapping field names in double tildes (~~).  Our first field is for the book title.  This becomes "~~title~~".  We do the same thing for the "author" field, and our template is now complete.

6) Let's add some JavaScript to define the book data and then send that data to the template engine.  Our example book object will have the "title" field set to "The DOM" and the "author" field set to "Jan".  The last step is to call "dna.clone" to make a copy of the "book" template and inject the data into the template.

7) When we reload the web page, we can see our book titled "The DOM" by the author "Jan".  Most likely we want to display a list of books.  All we need to do is rename the "book" variable to "books", and change its value from a single object to an array of objects.  Let's add two more books titled "Howdy HTML5" and "Styling CSS3".  The "clone" function automatically generates a list of clones when the data is an array of objects.

8) Back to the browser.  Refresh.  And, there's our three books: "The DOM", "Howdy HTML5", and "Styling CSS3"

9) For more information, including cloning options and event handling, check out the documentation on the dnajs.org website.  From there you can also get to the GitHub project and post issues with questions.  Thanks.

---
