Search⌘ K
Home/
Courses/
Introduction to Marionette.js – The Backbone Framework

Some Cleanup

Cleaning up our code by updating list view and controller files according to the previously made modifications in our project.

We'll cover the following...

The triggers hash

Now that we’re using the triggers hash, let’s use it to clean up our code a bit. So far, we’ve got the following code:

Node.js
List.Contact = Marionette.ItemView.extend({ 
  tagName: "tr",
  template: "#contact-list-item",
  events: {
    "click": "highlightName",
    "click td a.js-show": "showClicked",
    "click td a.js-edit": "editClicked",
    "click button.js-delete": "deleteClicked"
  },
  // edited for brevity
  showClicked: function(e){ 
    e.preventDefault();
    e.stopPropagation(); 
    this.trigger("contact:show", this.model);
  },
  editClicked: function(e){ 
    e.preventDefault();
    e.stopPropagation();
    this.trigger("contact:edit", this.model);
  },
  deleteClicked: function(e){ 
    e.stopPropagation(); 
    this.trigger("contact:delete", this.model);
  },
  // edited for brevity 
});

Using a triggers hash, we can reduce the code to the following:

Node.js
List.Contact = Marionette.ItemView.extend({ 
  tagName: "tr",
  template: "#contact-list-item",
  triggers: {
    "click td a.js-show": "contact:show",
    "click td a.js-edit": "contact:edit",
    "click button.js-delete": "contact:delete"
  },
  events: {
    "click": "highlightName"
  },
  // edited for brevity
});

Since the triggers hash prevents the default event action and stops the event ...