2013-05-17 269 views
2

我想知道在Backbone.js的一个集合中管理子模型视图一些通用的最佳实践模型视图管理。嵌套集合/ Backbone.js的中

到今天为止,我一直在使用下面的解决方案。只是想知道是否有其他人有这个,或更好的处理方式。目前为止我的工作很好,但我总是有兴趣学习更多&提炼我的代码。

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(); 
    }, 

}); 

是否有其他人有他们喜欢用于这种情况的东西?

+0

将这项帮助:https://github.com/afeld/backbone-nested? – poseid

+0

不 - 看起来像支持嵌套模型属性的库。这个问题是关于视图管理的,或者特别是在观看那些观看那些模型所盯着的集合的视图中观看单个模型的视图的管理。 – 1nfiniti

回答

3

我处理过同样的问题,有很多的,感觉愚蠢而产生吨内存泄漏的样板代码。

你应该使用Marionette.js,尤其是Marionette.CollectionView/CompositeView中为你收集观点和Marionette.ItemView为您的项目。

木偶的美妙之处在于你不需要改变你的整个应用程序的结构,你可以改变以延长木偶对象为您的特定需求的层次,它会做的工作适合你。

我感到非常满意,最终我提出我的使用Marionette.js对象整个应用程序。

+0

感谢您的答案 - 伟大的链接太BTW。我读过关于木偶,但从来没有完全掌握它还没有。因为有那么多的第三方插件在那里,所以很受欢迎。 – 1nfiniti

+0

@mikeyUX - 我确切地知道你在说什么,你也没有完全理解为什么我们需要这些第三方解决方案,直到你在骨干上工作足够的时间,并且“感觉到痛苦”。我还建议你结帐Marionette.Layout,这也使事情更简单的设计明智。 – ekeren