Marionette ItemView 不会从集合视图中重新渲染模型更改答案

【问题标题】：Marionette ItemView not re-rendering on model change from collection viewMarionette ItemView 不会从集合视图中重新渲染模型更改
【发布时间】：2014-05-20 19:53:11
【问题描述】：

我创建了一个传递集合视图和集合的集合。该集合引用了我创建的模型。获取集合时，项目会成功呈现，但是当模型更改时，itemViews 不会按预期重新呈现。

例如，tweetCollectionView 中的 itemAdded 函数被调用了两次（在 fetch 上添加了两个模型），但即使 parse 函数随着时间的推移为这些模型返回不同的属性（我假设这将调用集合上的更改事件，或者特别是模型上的更改事件，我试图在 ItemView 中捕获） itemChanged 永远不会被调用，并且 itemViews 永远不会重新渲染，我希望在捕获 itemViews 模型更改事件时完成。

代码如下：

    function TweetModule(){

            String.prototype.parseHashtag = function() {
                return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
                    var tag = t;
                    return "<span class='hashtag-highlight'>"+tag+"</span>";
                });
            };

            String.prototype.removeLinks = function() {

                var urlexp = new RegExp( '(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?' );

                return this.replace( urlexp, function(u) {
                    var url = u;
                    return "";
                });

            };

            var TweetModel = Backbone.Model.extend({
                idAttribute: 'id',
                parse: function( model ){
                    var tweet = {},
                        info = model.data;

                    tweet.id = info.status.id;
                    tweet.text = info.status.text.parseHashtag().removeLinks();
                    tweet.name = info.name;
                    tweet.image = info.image_url;
                    tweet.update_time_full = info.status.created_at;
                    tweet.update_time = moment( tweet.update_time_full ).fromNow();

                    return tweet;
                }
            });

            var TweetCollection = Backbone.Collection.extend({
                model: TweetModel,
                url: function () {
                    return '/tweets/game/1'
                }
            });

            var TweetView = Backbone.Marionette.ItemView.extend({

                template: _.template( require('./templates/tweet-view.html') ),

                modelEvents:{
                    "change":"tweetChanged"
                },
                tweetChanged: function(){
                    this.render();
                }
            })


            var TweetCollectionView = Marionette.CompositeView.extend({
                template: _.template(require('./templates/module-twitter-feed-view.html')),
                itemView: TweetView,
                itemViewContainer: '#tweet-feed',
                collection: new TweetCollection([], {}),
                collectionEvents: {
                    "add": "itemAdded",
                    "change": "itemChanged"
                },
                itemAdded: function(){
                    console.log('Item Added');
                },
                itemChanged: function(){
                    console.log("Changed Item!");
                }
            });

            this.startInterval = function(){
                this.fetchCollection();
                this.interval = setInterval( this.fetchCollection, 5000 );
            }.bind(this);

            this.fetchCollection = function(){
                this.view.collection.fetch();
                this.view.render();
            }.bind(this);

            //build module here
            this.view = new TweetCollectionView();
            this.startInterval();

    };

我可能对 Marionette 处理事件冒泡做出假设，但根据文档，我没有看到任何指向这一点的内容。

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

在你的CollectionView 中，做

this.collection.trigger ('reset')

添加模型后。

这将触发ItemView 中的onRender () 方法重新渲染。

【讨论】：

【解决方案2】：

我知道我在回答一个老问题，但由于它有相当多的观点，我想我会正确回答。另一个答案没有解决代码的问题，其解决方案（触发重置）将强制所有子级重新渲染，这既不需要也不需要。

OP 代码的问题在于 change 不是一个收集事件，这就是为什么永远不会调用 itemChanged 方法的原因。正确监听的事件是update，根据Backbone.js catalog of events是一个

...添加任意数量的模型后触发的单个事件或从集合中删除。

该问题没有说明正在使用的 Marionette 版本，但至少返回到 2.0.0 版本 CollectionView 将智能地重新呈现集合 add、remove 和 reset 事件。来自CollectionView: Automatic Rendering

当视图的集合被“重置”时，视图将调用渲染在自身上并重新渲染整个集合。

当一个模型被添加到集合中时，集合视图将将该模型渲染到子视图集合中。

当模型从集合中移除（或销毁/删除）时，集合视图将销毁并删除该模型的子视图

行为is the same in v3。

【讨论】：