javascript - Backbone : multiple View Models for the same model

Question

新手 Backbone 问题:

上下文:使用 Backbone 构建购物 list

我有一个名为名称、描述和标签(数组)属性的模型类。 我想基于此模型或此模型的集合创建两个 View 。

第一个 View 将显示所有项目，如下所示:

<ul>
<li><h3>Item 1 Name</h3>
<p>Item 1 Description</p>
<p>Tag1, Tag2 ,Tag3</p>
</li>
.......
</ul>

第二个 View 将显示标签列表和标记项目的数量，如下所示:

<ul>
<li>Tag1<span>{count of items tagged with tag1}</span></li>
<li>Tag2<span>{count of items tagged with tag2}</span></li>
<li>Tag3<span>{count of items tagged with tag3}</span></li>
</ul>

我构建了模型、集合和 View 来支持第一个 View 。我想知道使用现有模型(或创建新模型？)构建第二个 View 的正确方法。

提前致谢...

现有的 Item 模型和集合(从 Todo.js 示例中提取)

window.Item = Backbone.Model.extend({
// Default attributes for a todo item.
defaults: function() {
return {
order: Items.nextOrder()
};
}
});


window.ItemList = Backbone.Collection.extend({

model: Item,

localStorage: new Store("items"),

nextOrder: function() {
  if (!this.length) return 1;
  return this.last().get('order') + 1;
},

comparator: function(item) {
  return item.get('order');
}

});

更新:尽管覆盖 parse() 方法在显示带有项目计数的标签名称时有效，但我无法在添加新项目后刷新标签名称/项目计数列表。这可能是因为 View 是从不同的集合中呈现的。我将尝试扩展 ItemList 集合并覆盖 parse() 方法。非常感谢任何帮助。

Answer 1

@machineghost 是正确的；模型与 View 完全分离，因此您可以根据需要将尽可能多的 View 附加到同一模型。如果 View 具有您想要共享的逻辑或属性，您还可以扩展 View 。当我使用 Backbone 时，我经常发现自己扩展父 View 只是为了覆盖 render 函数，或者提供不同的模板。

第一 View

ShoppingCartView = Backbone.View.extend({
  model: ShoppingCart
  ...
});

第二独立视角

CheckoutView = Backbone.View.extend({
  model: ShoppingCart
  ...
});

第二个 View 先延伸

CheckoutView = ShoppingCartView.extend({ 
  template: a_different_template // syntax depends on your templating framework
  ... 
});