如何使用Backbone.Marionette處理嵌套CompositeView？

我正在通過Backbone進入更大規模的數據結構，並且遇到了通過CompositeViews可以很好地表示數據的場合;也就是CollectionViews，在它們周圍添加「添加絨毛」，比如標題，按鈕等等。如何使用Backbone.Marionette處理嵌套CompositeView？

但是，我在嵌套複合視圖的過程中遇到了很多困難。使用CompositeView上的標準itemView屬性來渲染另一個CompositeView似乎根本不會觸發。

假設我有一個父ItemView控件，實例化本身（以下Derick Bailey's example;假設這個頂層就是在收集初始fetch()將被稱爲）：

var User = Backbone.Model.extend({}); 

var UserCollection = Backbone.Collection.extend({ 
    model: User 
}); 

var userList = new UserCollection(userData); 

var schedulerCompositeView = new SchedulerCompositeView({ 
    collection: userList 
}); 

schedulerCompositeView.render(); 

this.ui.schedulerWidget.html(schedulerCompositeView.el);

而且SchedulerCompositeView看起來例如：

return Backbone.Marionette.CompositeView.extend({ 
    template: Handlebars.compile(schedulerCompositeViewTemplate), 
    itemView: SchedulerDetailCompositeView, 
    appendHtml: function (collectionView, itemView) { 
     collectionView.$("#schedulerGroups").append(itemView.el); 
    } 
});

最後，SchedulerDetailCompositeView：

return Backbone.Marionette.CompositeView.extend({ 
    template: Handlebars.compile(schedulerDetailCompositeViewTemplate), 
    itemView: SchedulerDetailItemView, 
    appendHtml: function (collectionView, itemView) { 
     collectionView.$("#schedulerDetailStops").append(itemView.el); 
    } 
});

SchedulerDetailCompositeView永遠不會被實例化;實際上，它的appendHtml()方法似乎根本不會觸發。

顯然還有一些其他信息在這裏丟失;顯然目的是將一個集合/模型傳遞給SchedulerDetailCompositeView，但由於嵌套的CompositeViews，我不確定這樣做的正確方法。

作爲參考，這裏是我嘗試實現的結構的粗略模型;如果有可能是一個更好的方式比嵌套CompositeViews達到這個目標，我一定洗耳恭聽：

http://jsfiddle.net/KAWB8/

來源

2012-11-26 J. Ky Marsh

在SchedulerDetailCompositeView初始化函數中，您將顯式地爲this.collection賦值，即告訴複合視圖關於它處理的集合。像在[treeview]（http://jsfiddle.net/derickbailey/AdWjU/）小提琴 – deven98602

這似乎沒有足夠的信息。即使在通過initialize方法分配集合之後，SchedulerDetailCompositeView上的appendHtml實際上也不會觸發。初始化確實，但appendHtml沒有。 –

尤里卡！我被deven98602設置在正確的道路上。

要記住的關鍵是，如果你嵌套多個CompositeViews（或CollectionViews），每個級聯級別下降將代表其父母的集合的單位;也就是我以前的SchedulerDetailCompositeView表示來自SchedulerCompositeView集合中的單個模型。因此，如果我構建嵌套複合視圖（可能基於深度嵌套數據），我必須重新定義這些級聯子集上的集合，因爲它們只有與它們關聯的單個模型，而不是合適的集合來呈現。

這就是說，更新SchedulerDetailCompositeView看起來這樣：

return Backbone.Marionette.CompositeView.extend({ 
    template: Handlebars.compile(schedulerDetailCompositeViewTemplate), 
    itemView: SchedulerDetailItemView, 
    initialize: function() { 
     var Load = Backbone.Model.extend(); 

     var LoadCollection = Backbone.Collection.extend({ 
      model: Load 
     }); 

     // this array of loads, nested within my JSON data, represents 
     // a new collection to be rendered as models using SchedulerDetailItemView 
     var loadList = new LoadCollection(this.model.get("loads")); 

     this.collection = loadList; 
    }, 
    appendHtml: function (collectionView, itemView) { 
     collectionView.$("#schedulerDetailStops").append(itemView.el); 
    } 
});

一旦收集設置，appendHtml()火災預期，並呈現每款新車型這個新設置的收藏。

來源

2012-11-27 23:29:18

我希望木偶（/ Backbone）能夠爲我處理這個問題，但事實並非如此。 +1問題和答案 – Bojangles

我不會定義一個本地類但每次加載。這非常浪費。 – demonkoryu

如何使用Backbone.Marionette處理嵌套CompositeView？

回答

相關問題