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

Solution: Events in CompositeView

Understand how to implement click event handling in Marionette CompositeView by setting up event listeners on table cells. This lesson guides you to create alert responses upon clicks, emphasizing the importance of associating events only with elements within the view’s DOM scope.

We'll cover the following...

Defining a click event handler for generating an alert

To achieve the desired functionality, we need to have a click event handler for the td selector:

Node.js
List.Contact = Marionette.ItemView.extend({ 
  tagName: "tr",
  template: "#contact-list-item",
  events: {
    "click": "highlightName",
    "click td": "alertCellText"
  },
  highlightName: function(e){
    this.$el.toggleClass("warning");
  },
  
  alertCellText: function(e){
    alert($(e.target).text());
  } 
});

We define the ...