Step 5 - Render All Conracts

1. Create start method in app.js

   start: function() {
     console.log('Contact Manager started!');
   }
   

2. Add application initialization block in index.html:

   <script>
     $(function() {
       ContactManager.start();
     });
   </script>
   

3. Check in DevTools

4. Pass bootstrapping data to start method:

     <script>
       $(function() {
         ContactManager.start({
           contacts: [
             {
               id: 1,
               name : 'Terrence S. Hatfield',
               tel: '651-603-1723',
               email: '[email protected]'
             },
             {
               id: 2,
               name : 'Chris M. Manning',
               tel: '513-307-5859',
               email: '[email protected]'
             },
             {
               id: 3,
               name : 'Ricky M. Digiacomo',
               tel: '918-774-0199',
               email: '[email protected]'
             },
             {
               id: 4,
               name : 'Michael K. Bayne',
               tel: '702-989-5145',
               email: '[email protected]'
             },
             {
               id: 5,
               name : 'John I. Wilson',
               tel: '318-292-6700',
               email: '[email protected]'
             },
             {
               id: 6,
               name : 'Rodolfo P. Robinett',
               tel: '803-557-9815',
               email: '[email protected]'
             }
           ]
         });
       });
     </script>
   

5. Create contacts model from passed data in show method and check in DevTolls

6. Create simple contacts view (views/contacts.js):

   ContactManager.Views.Contacts = Backbone.View.extend({
     template: _.template($('#tpl-contacts').html()),
   
     render: function() {
       var html = this.template();
       this.$el.html(html);
       return this;
     }
   });
   
   

   and add template to index.html:

   <script type="text/template" id="tpl-contacts">
     <h2 class="page-header text-center">List of contacts</h2>
     <ul class="media-list row contacts-container"></ul>
   </script>
   

   and

     <script src="app/js/views/contacts.js"></script>
   

7. Add class to main container and render contacts view to it on app start:

   in index.html:

   <div class="container">
     <div class="row">
       <div class="col-xs-12 main-container">
       </div>
     </div>
   </div>
   

   in js/app.js:

     var contactsView = new ContactManager.Views.Contacts({
       collection: contacts
     });
   
     $('.main-container').html(contactsView.render().$el);
   

8. Add template for Contact View:
   in index.html:

   <script type="text/template" id="tpl-contact">
     <div class="thumbnail">
       <img class="media-object" src="app/img/faces/<%- avatar %>">
     </div>
     <div class="media-heading">
       <h3>
         <%- name %>
       </h3>
     </div>
     <div class="media-body">
       <dl>
         <dt>Phone Number:</dt>
         <dd><%- tel %></dd>
         <dt>Email:</dt>
         <dd><%- email %></dd>
       </dl>
     </div>
     <hr>
   </script>
   

   and js/views/contact.js:

   ContactManager.Views.Contact = Backbone.View.extend({
   tagName: 'li',
   className: 'media col-md-6 col-lg-4',
   template: _.template($('#tpl-contact').html()),
   
   render: function() {
     var html = this.template(this.model.toJSON());
     this.$el.append(html);
     return this;
   }
   });
   

9. Render each contact in Contacts view:

   ContactManager.Views.Contacts = Backbone.View.extend({
   template: _.template($('#tpl-contacts').html()),
   
   renderOne: function(contact) {
     var itemView = new ContactManager.Views.Contact({model: contact});
     this.$('.contacts-container').append(itemView.render().$el);
   },
   
   render: function() {
     var html = this.template();
     this.$el.html(html);
   
     this.collection.each(this.renderOne, this);
   
     return this;
   }
   });
   
   

Difference