Skip to content

Step 7 - Delete contact button

Compare
Choose a tag to compare
@dmytroyarmak dmytroyarmak released this 03 Feb 09:34
  1. Add delete link to contact's template:

        <div class="media-heading">
          <h3>
            <%- name %>
            <small>
              <a href="#contacts/delete/<%- id %>" class="delete-contract">
                <span class="glyphicon glyphicon-trash"></span>
              </a>
            </small>
          </h3>
        </div>
    
  2. Add click event handler to contact view and make console log on click:

    events: {
      'click .delete-contract': 'onClickDelete'
    },
    
    /* ... */
    
    onClickDelete: function(e) {
      e.preventDefault();
      console.log('Delete');
    }
    
  3. Delete contact from collection on click:

    onClickDelete: function(e) {
      e.preventDefault();
      this.model.collection.remove(this.model);
    }
    
  4. Remove view on model remove:

    initialize: function() {
      this.listenTo(this.model, 'remove', this.remove);
    },
    

Difference