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

Some Cleanup

Explore how to refine Marionette.js views by using the triggers hash to simplify event handling and reduce redundancy. Understand how to update the controller to work with trigger arguments and learn about a web storage quirk related to browser back navigation. This lesson helps you maintain organized code and ensure your Marionette application responds correctly to user interactions.

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 ...