CODEWITHSUNDEEP
javascriptbackbone.jsmarionettebackbone-events
thomasjonas
thomasjonas

Reputation: 480

Marionette's CompositeView event not firing

I'm having trouble using Marionette's CompositeView. I render my model in my CompositeView using a template and want to add a click event to it. Somehow I can't get the events to work using the events: { "click": "function" } handler on the CompositeView... What am I doing wrong?

var FactsMenuItem = Backbone.Marionette.ItemView.extend({
    template: tmpl['factsmenuitem'],

    initialize: function() {
        console.log('factsmenuitem');
    },

    onRender: function() {
        console.log('factsmenuitem');
    }

});

var FactsMenuView = Backbone.Marionette.CompositeView.extend({
    template: tmpl['factsmenu'],

    itemView: FactsMenuItem,

    itemViewContainer: ".subs",

    events: {
        'click': 'blaat'
    },

    blaat: function() {
        console.log('this is not working');
    },

    initialize: function() {
        this.model.get('pages').on('sync', function () {
            this.collection = this.model.get('pages');
            this.render();
        }, this);
    },

    onRender: function() {
        console.log('render factsmenu');
    }

});


var FactsLayout = Backbone.Marionette.Layout.extend({

    template: tmpl['facts'],

    regions: {
        pages: ".pages",
        filter: ".filter",
        data: ".data"
    },

    initialize: function(options) {
        this.currentPage = {};

        this.factsMenu = new FactsMenu();
        this.factsView = new FactsMenuView({model: this.factsMenu});
    },

    onRender: function() {
        this.pages.show(this.factsView);
    }

});

Edit: I removed some code that made the question unclear...

The problem lies that the events of the non-collectionview of the compositeview (the modelView??) are not fired. I think this has something to do with the way the FactsLayoutView instantiates the compositeview...

Upvotes: 0

Views: 1968

Answers (2)

thomasjonas
thomasjonas

Reputation: 480

The problem was caused by the way the region was rendered. In my FactsLayout is used this code:

initialize: function(options) {
    this.currentPage = {};

    this.factsMenu = new FactsMenu();
    this.factsView = new FactsMenuView({model: this.factsMenu});
},

onRender: function() {
    this.pages.show(this.factsView);
}

Apparently you can't show a view on a onRender function... I had to change the way the FactsLayout is initialized: 

var layout = new FactsLayout({
    slug: slug
});
layout.render();

var factsMenu = new FactsMenu({ slug: slug });
var factsView = new FactsMenuView({model: factsMenu});

layout.pages.show(factsView);

Upvotes: 1

Lorenzo B
Lorenzo B

Reputation: 33428

Maybe I did not understand your question well but if you need to listen an event fired from an item view within your composite view you should do like the following.

Within the item view test method.

this.trigger("test");

Within the composite view initialize method.

this.on("itemview:test", function() { });

Note that when an event is fired from an item of a CollectionView (a CompositeView is a CollectionView), it is prepended by itemview prefix.

Hope it helps.

Edit: Reading you question another time, I think this is not the correct answer but, about your question, I guess the click in the composite view is captured by the item view. Could you explain better your goal?

Upvotes: 0

Related Questions