在marionette.js中使用嵌套模板的最佳實踐

Question

我一直在研究單頁應用程序，並從今天開始使用Marionette.js。 我發現應用程序的整體結構非常有效（模塊，事件等），當使用復雜的數據結構時，我不知道如何使用模板（視圖）來獲取大多數模板。 我習慣處理類似把手的模板，這些模板可以執行一些附加的邏輯和嵌套。

顯示嵌套模板的最佳實踐是什么？

考慮具有嵌套數據的這種不太復雜的數據結構：

[{name:"John", addresses:
  [
    {street:"John Street",city:"New York, NY"},
    {street:"John Street",city:"Madrid, PA"}
  ],
  notes: [{note:"note1"},{note:"note2"}]
  },
  {name:"Alex", addresses:
  [
    {street:"Alex Street",city:"New York, NY"},
    {street:"Alex Street",city:"Madrid, PA"}
  ],
  notes: {}}
]

如何有效地將第一級數組呈現為表行和內部數組（如“地址”和“注釋”）到行中的各個列中（例如，以另一個表的形式）。

Answer 1

木偶提供了Collection和CompositeViews來呈現對象的集合。 表可以通過使用CompositeView中查看文檔可以有效地呈現CompositeView中 -它具有了如何使用CompositeView中呈現表中的例子。

對於渲染復雜的嵌套結構，最好使用Handlebars，因為它允許引用嵌套字段，例如： {{xy}}

Answer 2

您可以使用CollectionView ，將數組作為其collection傳遞給視圖，然后可以遍歷每一行的addresses以顯示這些addresses 。

我不會為addresses數組的每個元素創建視圖，因為不需要自己管理它們，它們將在顯示主視圖時顯示（對嗎？）。

所以你可能會有這樣的事情

NoUsers = Backbone.Marionette.ItemView.extend({
  template: "#no-users-template"
});

當傳遞的collection為空時將使用它

User = Backbone.Marionette.ItemView.extend({});

這將定義如何呈現單個用戶（您的頂級數組元素），您可以使用Handlebars進行addresses循環，例如

<div>
  {{ #each addresses }}
  <span>{{ street }} - {{ city }}</span>
  {{/each}}
</div>

Users = Backbone.Marionette.CollectionView({
  itemView: User,
  emptyView: NoUsers
});

它將定義它們如何共同發揮作用，有關詳細示例，請參見由Marionette的創建者DErick Bailey制作的示例應用程序 。

Answer 3

如果您使用下划線，則可以

<%= Marionette.Renderer.render('#your-template', {
    your: data,
    goes: here
}) %>

或更好的例子是

<% _.each(someArrayOnModel, function(item) { %>
    <%= Marionette.Renderer.render('#templateForItem', item) %>
<% }); %>