Step 8 - Add new contact

1. Add new contact button under contacts list:

     <script type="text/template" id="tpl-contacts">
       <h2 class="page-header text-center">List of contacts</h2>
       <p class="text-center">
         <a href="#contacts/new" class="btn btn-lg btn-outline">Add Contact</a>
       </p>
       <ul class="media-list row contacts-container"></ul>
     </script>
   

2. Add Contact Form view and template
   js/views/contactForm.js

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

   index.html:

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

   template:

     <script type="text/template" id="tpl-new-contact">
       <h2 class="page-header text-center">Create Contact</h2>
       <form role="form" class="form-horizontal contract-form">
         <div class="form-group">
           <label class="col-sm-4 control-label">Full name:</label>
           <div class="col-sm-6">
             <input type="text" class="form-control contact-name-input">
           </div>
         </div>
         <div class="form-group">
           <label class="col-sm-4 control-label">Email address:</label>
           <div class="col-sm-6">
             <input type="email" class="form-control contact-email-input">
           </div>
         </div>
         <div class="form-group">
           <label class="col-sm-4 control-label">Telephone number:</label>
           <div class="col-sm-6">
             <input type="tel" class="form-control contact-tel-input">
           </div>
         </div>
         <div class="form-group">
           <div class="col-sm-offset-4 col-sm-3">
             <button type="submit" class="btn btn-outline btn-lg btn-block">Submit</button>
           </div>
           <div class="col-sm-3">
             <a href="#contacts" class="btn btn-outline btn-lg btn-block">Cancel</a>
           </div>
         </div>
       </form>
     </script>
   

3. Render ContactForm view on #/contacts/new route:

     router.on('route:newContact', function() {
       var newContactForm = new ContactManager.Views.ContactForm();
   
       $('.main-container').html(newContactForm.render().$el);
     });
   

4. Listen to form submit and trigger event with form's data:

   events: {
     'submit .contract-form': 'onFormSubmit'
   },
   
   /* ... */
   
   onFormSubmit: function(e) {
     e.preventDefault();
   
     this.trigger('form:submitted', {
       name: this.$('.contact-name-input').val(),
       tel: this.$('.contact-tel-input').val(),
       email: this.$('.contact-email-input').val()
     });
   }
   

5. Create new Contact on form submitted:

     router.on('route:newContact', function() {
       var newContactForm = new ContactManager.Views.ContactForm();
   
       newContactForm.on('form:submitted', function(attrs) {
         attrs.id = contacts.isEmpty() ? 1 : (_.max(contacts.pluck('id')) + 1);
         contacts.add(attrs);
         router.navigate('contacts', true);
       });
   
       $('.main-container').html(newContactForm.render().$el);
     });
   

Difference