javascript - Backbone.js 中的嵌套集合/模型 View 管理

Question

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

迄今为止，我一直在使用以下解决方案。只是想知道是否还有其他人对此有所了解，或者有更好的处理方法。到目前为止它对我来说效果很好，但我一直有兴趣了解更多信息并完善我的代码。

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 用于您的 Collection View 和 Marionette.ItemView 用于您的项目。

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

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

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