木偶合成視圖呈現集合

我有一個名爲IndexView（）的木偶合成視圖。它綁定到一個名爲index.html的句柄模板。木偶合成視圖呈現集合

在我繼續之前，我會注意到我明白我可以簡單地渲染與複合視圖綁定的項目視圖，以輸出集合中的每個模型。我會這樣做，但我想問我的問題，我的理解。

我取從URL集合「/ API /用戶」

，並得到這樣

[{"name": "John Doe", "age": 30 }, {"name":"Jane Doe", "age": 31}]

在我的用戶控制器

我的代碼清單

var usersCollection = new UsersCollection(); 
App.contentRegion.show(new IndexView({collection: usersCollection})); 
usersCollection.fetch();

如何是否遍歷模板中的集合？

例如

{{#each ????}} 
    <li> {{name}} {{age}} </li> 
{{/each}}

什麼會去問號的地方？從ItemView的木偶文檔中，它將是項目。 CollectionView或CompositeView會是什麼？

來源

2014-07-26 decapo

你能發佈你的IndexView代碼嗎？ –

這只是Marionette.CompositeView。extend（{template：Template}）;它在一個需要的模塊中，因此在這裏發佈不會給你很多細節。這個問題只是爲了看看是否有辦法做到這一點。實際上我沒有任何用這種方式使用Composite視圖的意圖，我只是好奇而已。 – decapo

Marionette.CompositeView使用buildItemView()構建方法將集合的模型添加到其項目視圖。

它也有一個名爲serilizeData功能，本機實現的樣子：

// Serialize the collection for the view. 
// You can override the `serializeData` method in your own view 
// definition, to provide custom serialization for your view's data. 

Marionette.CompositeView = Marionette.CollectionView.extend({ 
    // composite view implementation 
    serializeData: function() { 
     var data = {}; 
     if (this.model) { 
      data = this.model.toJSON(); 
     } 
     // your case 
     // data.myCollection = this.collection.toJSON(); 
     // then use myCollection in your template in place of ???? 
     return data; 
    } 
    // composite view implementation 
});

您可以覆蓋此傳遞任何對象或對象的集合CompositeView中的模板。

據我所知，在這種情況下，沒有其他方法可以直接從模板訪問集合。

來源

2014-07-26 23:37:49

您不會迭代模板中的集合。 CompositeView在內部循環集合併爲集合中的每個模型呈現ItemView。每個ItemView都從該集合中接收一個模型作爲其數據。然後使用傳遞給模板的模型屬性呈現每個單獨的ItemView。因此對於ItemView的模板，您不需要遍歷每個項目，因爲上下文僅表示單個項目（模型）。因此，你的模板將僅僅是：

<li> {{name}} {{age}} </li> 
<li> {{someOtherAttribute}} </li> 
<li> {{andYetAnotherAttribute}} </li>

編輯： 如果你想收集遍歷在您的模板，然後不使用的CollectionView。通過收集到的ItemView控件這樣的：

view = new ItemView({collection: myCollection});

的ItemView控件將通過集合作爲模型的陣列，以在模板上下文的items財產的模板。所以，你的模板將是：

{{#each items}} 
    <li> {{name}} {{age}} </li> 
{{/each}}

由於ItemView控件正在處理所有車型，您的事件將不再是一個單一的模式，而是整個集合。

來源

2014-07-27 01:45:46 Simon

你是對的，這是我如何使用複合視圖。我只是好奇，如果我可以用另一種方式使用它（通過迭代模板中的集合）以及我將如何去做。謝謝。 – decapo

@decapo，你可以做到這一點。檢查我的編輯。 – Simon

木偶合成視圖呈現集合

回答

相關問題