Readme.md

HTML Templates with Handlebars.js

1. Create the following using Handlebars.js

   

2. Create a dynamic select using Handlebars.js

   • The options in the select should be generated based on a collection of JavaScript objects
   • Example:

   

       var items = [{
           value: 1,
           text: 'One'
       }, {
           value: 2,
           text: 'Two'
       }, {
           value: 3,
           text: 'Three'
       }];
   
       var selectHTML = selectTemplate(items);

3. *Create a jQuery plugin for ListView

   • Apply a template for each item of a collection
   • Using the data-template attribute set the ID of the template to use for the items
   • Must work with different collections and templates

   

       <ul id="books-list" data-template="book-item-template"></ul>
   
       <script id="book-item-template" type="text/x-handlebars-template">
           <li class="book-item">
               <a href="/#books/{{id}}">
                   <strong>{{title}}</strong>
               </a>
           </li> 
       </script>

   $('#books-list').listview(books);

   

       <table>
           <thead>
               <tr><th>#</th><th>Name</th><th>Mark</th></tr>
           </thead>
               <tbody id="students-table" data-template="students-row-template">   
           </tbody>
       </table>
   
       <script id="students-row-template" type="text/x-handlebars-template">
           <tr class="student-row">
               <td>{{number}}</td>
               <td>{{name}}</td>
               <td>{{mark}}</td>
           </tr>
       </script>

   $('#students-table').listview(students);

4. *Extend the previous task to set the template inside the DOM element, instead of setting it with data-template

       <table>
           <thead>
               <tr><th>#</th><th>Name</th><th>Mark</th></tr>
           </thead>
           <tbody id="students-table">
               <tr class="student-row">
                   <td>{{number}}</td>
                   <td>{{name}}</td>
                   <td>{{mark}}</td>
               </tr>       
           </tbody>
       </table>

   $('#students-table').listview(students);