Marionette Collection View, fetching collection doesn't trigger events

Question

I have got a problem: My CollectionView doesn't render my ItemViews. I pass a collection from a Layout to a collection view. I am fetching the collection in the CollectionView:

In the Layout:

    // Create a a collection for the view
    this.articles = new Articles(null, {
        organizationId : this.model.organizationId,
        projectId : this.model.id
    });

    var articlesView = new ArticleCollectionView({ collection : this.articles});
    this.articlesRegion.show(articlesView);

In the CollectionView:

define([
    'marionette',
    'templates',
    'i18n!nls/projectDashboard',
    'views/projectDashboard/ArticleItem'
], function (Marionette, templates, msg, ArticleItemView) {

    return Marionette.CollectionView.extend({

        initialize : function () {
            this.listenTo(this.collection, "reset", this.render);
            this.collection.fetch();
        },

        itemView : ArticleItemView

    });

});

In the ItemView:

define([
    'marionette',
    'templates',
    'models/Article'
],
function (Marionette, templates, Article) {

    return Marionette.ItemView.extend({

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

        template : templates.projectDashboard.articleItem
    });

});

The setup in general is working. I found one way to get this working: Fetch the collection in the layout and show the CollectionView in the region on the success callback.

But adding listeners on the collectionView for the collection fails. No event is fired for imperative and declarative listeners like

this.collection.on('reset', this.render, this);

or

collectionEvents : {
  'reset' : 'render'
}

I simply want to rerender the collection View with it's item Views if the collection is fetched. I am sure i missed something. Any help is appreciated!

UPDATE: I found something interesting: I already said if I fetch the collection in the layout and create the collectionView on the success callback it works. The interesting is: The listeners do work too if I pass the fetched collection. I trigger them by calling this.collection.fetch() in initialize again. Then the rerendering works. It must be something around the collection pass from the layout.

where are binding the event ? shouldn't it be in the CollectionView initialize method? Also try using listenTo instead of on — neebz
they are in the collectionView, i should add one in the CollectionView for better understanding i guess, doenst work with listenTo either — pfried
this is interesting. according to docs it seems you don't need to manually bind events as Marionnette does it automatically for you, see: github.com/marionettejs/backbone.marionette/blob/master/docs/… . In that case it seems to a weird issue, — neebz
can you put a breakpoint in your app at line#1202 here > github.com/marionettejs/backbone.marionette/blob/master/lib/… and see if it gets called correctly. — neebz

Mark Stratmann Mark Stratmann · Accepted Answer · 2014-11-10T22:29:32

You want to use the collectionEvents

Here is an example from the Marionette Docs

 Marionette.CollectionView.extend({
   collectionEvents: {
    "sync": "render"
   }
 });

In the example the render will be triggered when the collection has been fully populated from your back-end

modelEvents and collectionEvents

Marionette Collection View, fetching collection doesn't trigger events

1 Answers