javascript - Marionette Collection View, fetching collection doesn't trigger events - Stack Overflow

admin管理员组

文章数量:1022452

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.modelanizationId,
        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.

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.modelanizationId,
        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.

• javascript
• backbone.js
• view
• collections
• marionette

Share Improve this question Follow edited Oct 13, 2014 at 8:22 vvahans 1,8572121 silver badges2929 bronze badges asked Mar 1, 2013 at 12:21 pfriedpfried 5,08922 gold badges4141 silver badges7878 bronze badges 8

• where are binding the event ? shouldn't it be in the CollectionView initialize method? Also try using listenTo instead of on – neeebzz Commented Mar 1, 2013 at 12:25
• they are in the collectionView, i should add one in the CollectionView for better understanding i guess, doenst work with listenTo either – pfried Commented Mar 1, 2013 at 12:29
• 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./marionettejs/backbone.marionette/blob/master/docs/… . In that case it seems to a weird issue, – neeebzz Commented Mar 1, 2013 at 12:56
• can you put a breakpoint in your app at line#1202 here > github./marionettejs/backbone.marionette/blob/master/lib/… and see if it gets called correctly. – neeebzz Commented Mar 1, 2013 at 12:59
• It is called correctly – pfried Commented Mar 1, 2013 at 13:02

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 2

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

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.modelanizationId,
        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.

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.modelanizationId,
        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.

• javascript
• backbone.js
• view
• collections
• marionette

Share Improve this question Follow edited Oct 13, 2014 at 8:22 vvahans 1,8572121 silver badges2929 bronze badges asked Mar 1, 2013 at 12:21 pfriedpfried 5,08922 gold badges4141 silver badges7878 bronze badges 8

• where are binding the event ? shouldn't it be in the CollectionView initialize method? Also try using listenTo instead of on – neeebzz Commented Mar 1, 2013 at 12:25
• they are in the collectionView, i should add one in the CollectionView for better understanding i guess, doenst work with listenTo either – pfried Commented Mar 1, 2013 at 12:29
• 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./marionettejs/backbone.marionette/blob/master/docs/… . In that case it seems to a weird issue, – neeebzz Commented Mar 1, 2013 at 12:56
• can you put a breakpoint in your app at line#1202 here > github./marionettejs/backbone.marionette/blob/master/lib/… and see if it gets called correctly. – neeebzz Commented Mar 1, 2013 at 12:59
• It is called correctly – pfried Commented Mar 1, 2013 at 13:02

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： javascriptMarionette Collection Viewfetching collection doesn39t trigger eventsStack Overflow