Introduction to Marionette.js – The Backbone Framework/

...

/

Deleting a Contact

Deleting a Contact

Learn how to add a delete button and remove the contact and its information from the application in Marionette.

We'll cover the following...

Our goal is to enable the functionality of deleting a contact in our application. For that, we need to follow the steps provided in the figure below:

Press + to interact
Steps to follow to create the delete functionality for our application
Steps to follow to create the delete functionality for our application

Add the “Delete” button

Now that we’ve got our contacts listed as we want them, let’s add a button to delete a contact:

Press + to interact
<script type="text/template" id="contact-list-item"> 
    <td><%- firstName %></td>
    <td><%- lastName %></td>
    <td>
        <button class="btn btn-small"> 
            <i class="icon-remove"></i> 
            Delete
        </button>
    </td>
</script>

  • Lines 5–8: Generate a “Delete” button styled with Bootstrap.

  • Line 6: Add an icon to the button.

Add a column to the template

Since we’ve added a column to our child view, let’s keep things in sync by adding a column to the table template in line 6:

Press + to interact
<script type="text/template" id="contact-list"> 
  <thead>
    <tr>
      <th>First Name</th> 
      <th>Last Name</th> 
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</script>

If we look at our page, we’ll see our “Delete” ...