2013-05-17 223 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