Step 9 - Edit contact page

1. Add edit buttons to contact template:

       <div class="media-heading">
         <h3>
           <%- name %>
           <small>
             <a href="#contacts/edit/<%- id %>"><span class="glyphicon glyphicon-pencil"></span></a>
             <a href="#contacts/delete/<%- id %>" class="delete-contract">
               <span class="glyphicon glyphicon-trash"></span>
             </a>
           </small>
         </h3>
       </div>
   

2. Show ContactForm on #/contacts/edit/1:

     router.on('route:editContact', function(id) {
       var contact = contacts.get(id),
           editContactForm;
   
       if (contact) {
         editContactForm = new ContactManager.Views.ContactForm({
             model: contact
         });
   
         $('.main-container').html(editContactForm.render().$el);
       } else {
         router.navigate('contacts', true);
       }
     });
   

3. To be consistent pass empty contact model on newContact route:

   var newContactForm = new ContactManager.Views.ContactForm({
   model: new ContactManager.Models.Contact()
   });
   

4. Show model's attributes in form:

   render: function() {
   var html = this.template(_.extend(this.model.toJSON(), {
     isNew: this.model.isNew()
   }));
   this.$el.append(html);
   return this;
   },
   

   <h2 class="page-header text-center"><%= isNew ? 'Create' : 'Edit' %> Contact</h2>
   ...
   <input type="text" class="form-control contact-name-input" value="<%- name %>">
   ...
   <input type="email" class="form-control contact-email-input" value="<%- email %>">
   ...
   <input type="tel" class="form-control contact-tel-input" value="<%- tel %>">
   

5. Update contact on form:submitted:

   editContactForm.on('form:submitted', function(attrs) {
   contact.set(attrs);
   router.navigate('contacts', true);
   });
   

Difference