Question

我想知道Backbone.js中用于管理集合中的子模型视图的一些一般最佳实践。

到目前为止，我一直在使用下面的解决方案。只是想知道是否有其他人对此有所了解，或者更好的处理方法。到目前为止，它对我来说效果很好，但我总是对学习更多＆amp;改进我的代码。

CollectionView = Backbone.View.extend({

    renderItem: function(model) {   // instantiate view for an item
        this.viewPointers[model.cid] = new this.itemView({ model: model });
        this.$(".item-list").append( this.viewPointers[model.cid].render().el );
    },
    renderCollection: function() {  // instantiate views for entire collection
        var self = this;
        this.removeAll();   // clear current references (if any exist)
        this.collection.each(function(model){
            self.renderItem(model);
        });
    },

    removeItem: function(model) {   // remove/delete an individual view object
        this.viewPointers[model.cid].undelegateEvents();
        this.viewPointers[model.cid].remove();
        delete this.viewPointers[model.cid];
    },
    removeAll: function() { // remove/delete entire collection's view objects
        var self = this;
        _.each(this.viewPointers, function(view) {
            self.removeItem(view.model);
        });
    }

});

我通常通过扩展CollectionView类来实现它。像

这样的东西

MyView = CollectionView.extend({

    el: '#id',
    viewPointers: {}, // reference to individual itemViews by model CID
    itemView: views.SingleItem,

    ...

    initialize: function() {
        this.renderCollection();
    },

});

在这种情况下，是否还有其他人喜欢使用的东西？

Answer 1

我已经解决了同样的问题，许多样板代码感觉很愚蠢并且会产生大量的内存泄漏。

您应该使用Marionette.js，尤其是Marionette.CollectionView / CompositeView用于您的收藏视图，Marionette.ItemView用于您的物品。

Marionette的美妙之处在于您不需要更改整个应用程序结构，只需更改层次结构即可扩展Marionette对象以满足您的特定需求，它将为您完成工作。

我对此非常满意，最终我将整个应用程序移动到使用Marionette.js对象。

非常简短的教程https://www.youtube.com/watch?v=KT31H3Ayliw
在github上https://github.com/marionettejs/backbone.marionette

Backbone.js中的嵌套集合/模型视图管理

1 个答案: