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

Events in CompositeView

Explore how to define and handle events in Marionette CompositeView views. Learn to toggle CSS classes on clicked table rows for highlighting and access jQuery event objects to control link behaviors within your application.

We'll cover the following...

Using events

As we saw in the previous lessons, we can define events and their associated handlers within views.

Let’s use this ability to toggle highlighting on the rows that get clicked by toggling Bootstrap’s warning class to the appropriate tr element:

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

The events object in lines 5–7 associates jQuery event listeners with handler ...