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.

Answer 1

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