CODEWITHSUNDEEP
backbone.jsmarionette
tousif
tousif

Reputation: 103

backbone marionette composite view not firing events

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

Upvotes: 0

Views: 2953

Answers (1)

Derick Bailey
Derick Bailey

Reputation: 72858

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.

Upvotes: 6

Related Questions