View for adding book

Last time in list view, we construct the HTML right inside the JavaScript logic. We could improve it by moving the HTML code to HTML file. That’s what we are going to do in this example.

We have the data for each book in the model. For the view, we will have multiple list item to represent the book entries. We will use the template approach which put the HTML of the book entry in the HTML file and the JavaScript clone that HTML into the target list.

<div id='templates'>
  <li class='book-entry'>
    <h1>JavaScript: The good parts</h1>
    <p>1234567890123</p>
    <p class='ui-li-count'><a href='#' class='delete-btn' data-isbn='1234567890'>X Remove</a></p>
  </li>
</div>

The #templates element are used for JavaScript to clone elements. We don’t want to display it to our users. We will hide it with the display:none style.

#templates {
  display: none;
}

The view first cache the listElement and bookEntryTemplate element.

Then in the renderList function, we loop the model data and create a list item for each book. The list item is a clone from the template and then added to the target book list.

Please note that we haven’t deal with the data content yet. The data in the list item view is hardcoded and doesn’t match the model yet.

 // View
 // Anything that belongs to interface.
 ;(function($){
   var app = this.app || (this.app={});
 
   var view = app.view = {}
 
   view.listElement = $('#books');
 
  view.bookEntryTemplate = $('#templates').find('.book-entry');

  view.renderList = function(){
    view.listElement.empty();

    for(var i=0, len=app.data.books.length; i<len; i++) {
      var clone = view.bookEntryTemplate.clone();

      view.listElement.append(clone);
    }

    view.listElement.listview('refresh');
  }

}).call(this, jQuery);

Please note that using $('#templates').find('.book-entry') is faster than $('#templates .book-entry') in jQuery. See Optimize Selectors for detail.

Now whenever the user add a book to the model, we re-render the book list.

$('#add-book-btn').click(function(){
  app.data.addBook('Testing book', '1234567890123');
});

$('#add-book-btn').click(function(){
  app.data.addBook('Testing book', '1234567890123');
  app.view.renderList();
});

What’s next? We’re going to take a look at “Cloning with data”.