backbone marionette composite view not firing events

Question

Here is the code compositeView snippet using which i'm creating tree structure.

var TreeView = Backbone.Marionette.CompositeView.extend({

    template: "#filterTemplate",
    className:"menuItem",
    tagName: "ul",

    initialize: function(){
      this.collection = this.model.type;
        counter=0;
    },

    events: {
        'click .menuItem': 'show'
    },

    show: function(event) {
        var target = $(event.target);
        console.log(target);

    },

    appendHtml: function(collectionView, itemView){
        // ensure we nest the child list inside of 
        // the current list item
        $(itemView.el).attr("id","innerMenu"+counter);
        $(itemView.el).attr("class","innerMenu");
        collectionView.$("li:first").append(itemView.el);
        counter++;
    }
});

Tree is rendered perfect but events are not getting bind or not fired. Show method is never called. i'm using Backbone.Marionette v0.9.1

Derick Bailey Derick Bailey · Accepted Answer · 2012-06-28T12:43:55

You have the view itself set up to render with the menuItem css class. In any backbone view (this is not specific to Marionette), if you want to handle an event on the view's element directly (not one of it's children), you specify your event without a selector.

In your case, it would be:

events: {
    "click": "show"
}

This will configure the view's el with the "click" event directly, and the show method will be called when you click any part of this view's HTML.

backbone marionette composite view not firing events

1 Answers