dna.js Template Cloner

DOM Templating Engine for jQuery

by Reusablecode

HTML

<script src="http://www.dnajs.org/dna.js"></script>
<h1>Featured Books</h1>

<button id=action-add>Add a Book</button>
<button id=action-clear>Clear List</button>

<div id=book class=dna-template>
   <div>Title:  <span>~~title~~</span></div>
   <div>Author: <span>~~author~~</span></div>
</div>

CSS

body {
   font-family: sans-serif;
   margin: 30px;
   }
.dna-clone {
   width: 200px;
   background-color: pink;
   padding: 10px;
   margin-top: 15px;
   }

JavaScript

var app = {};

app.store = {
   books: [
      { title: 'JavaScript!', author: 'Jake' },
      { title: 'CSS3!',       author: 'Abby' },
      { title: 'HTML5!',      author: 'Ed' }
      ],
   clear: function() {
      dna.empty('book', { fade: true });
      },
   add: function() {
      var i = $('.dna-clone').length % app.store.books.length;
      dna.clone('book', app.store.books[i], { fade: true });
      },
   setup: function() {
      dna.clone('book', { title: 'Code!', author: 'Lee' });
      $('#action-add').click(app.store.add);
      $('#action-clear').click(app.store.clear);
      }
   };

app.store.setup();