javascript Backbone：同一模型的多个视图模型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8597726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone: multiple View Models for the same model
提问by Alper
Newbie backbone question:
新手骨干问题：
Context: Building a shopping list with backbone
上下文：使用主干构建购物清单
I have a model class called with name, description and tags (array) properties. I would like to create two views based on this model or this model's collection.
我有一个使用名称、描述和标签（数组）属性调用的模型类。我想基于此模型或此模型的集合创建两个视图。
First view will display all items like this:
第一个视图将显示所有项目，如下所示：
<ul>
<li><h3>Item 1 Name</h3>
<p>Item 1 Description</p>
<p>Tag1, Tag2 ,Tag3</p>
</li>
.......
</ul>
Second view will display a list of tags and count of tagged items like this:
第二个视图将显示标签列表和标签项目的数量，如下所示：
<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>
I built the model, collection and view to support the first view. I would like to know the right way to use the existing model (or create a new model?) to build the second view.
我构建了模型、集合和视图来支持第一个视图。我想知道使用现有模型（或创建新模型？）来构建第二个视图的正确方法。
Thanks in advance...
提前致谢...
existing Item model and collection (ripped from Todo.js example)
现有的项目模型和集合（从 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');
}
});
UPDATE: Even though the overriding the parse() method works when displaying Tag names with item count, I was unable to refresh tag name/item count list after adding a new item. This may be due to the fact that the views are rendering from different collections. I will try extending the ItemList collection and overriding the parse() method. Any help is greatly appreciated.
更新：尽管在显示带有项目计数的标签名称时覆盖 parse() 方法有效，但我无法在添加新项目后刷新标签名称/项目计数列表。这可能是因为视图是从不同的集合呈现的。我将尝试扩展 ItemList 集合并覆盖 parse() 方法。任何帮助是极大的赞赏。
采纳答案by Alper
回答by goggin13
@machineghost is right on; The models are totally decoupled from the views so you can make as many views attached to the same model as you please. You could also extend a view, if they have logic or attributes you would like to share. When I use Backbone I often find myself extending a parent view just to override the renderfunction, or to provide a different template.
@machineghost 是正确的；模型与视图完全分离，因此您可以根据需要将尽可能多的视图附加到同一模型。您还可以扩展视图，如果它们具有您想要共享的逻辑或属性。当我使用 Backbone 时，我经常发现自己扩展父视图只是为了覆盖render函数，或者提供不同的模板。
First view
第一眼
ShoppingCartView = Backbone.View.extend({
model: ShoppingCart
...
});
Second independent view
第二个独立观点
CheckoutView = Backbone.View.extend({
model: ShoppingCart
...
});
Second view extends first
第二个视图首先扩展
CheckoutView = ShoppingCartView.extend({
template: a_different_template // syntax depends on your templating framework
...
});
回答by machineghost
I'm pretty new to Backbone.js myself, so take this answer with a grain of salt, but I think ... you just make the second view. The whole point of de-coupling models and views is to make it so that you don't need to do anything to the models if all you want to do is do something different with your views.
我自己对 Backbone.js 还很陌生，所以对这个答案持保留态度，但我认为......你只是提出了第二个观点。解耦模型和视图的全部意义在于，如果您只想对视图做一些不同的事情，那么您不需要对模型做任何事情。
So, I thinkyou just need to create YourView2, tell it to use the same model as YourView1 and you should be in business.
因此，我认为您只需要创建 YourView2，告诉它使用与 YourView1 相同的模型，您就可以开展业务了。
回答by Alper
After a little research, I found Collection.Parsemethod that seems to be right place for transforming the response after a fetch() operation. Looks like I will need a new set model, collection and view objects. This is how I implemented the parse function in my collection object. Tested successfully in Chrome. Feel free to suggest improvements
经过一番研究，我发现Collection.Parse方法似乎是在 fetch() 操作后转换响应的正确位置。看起来我需要一个新的集合模型、集合和视图对象。这就是我在我的集合对象中实现解析函数的方式。在 Chrome 中测试成功。随意提出改进建议
<snip>
parse: function(response) {
var items = response; //the raw item model returned from localStorage
var tagNameItemCount = [];
var selectedTags = ["Tag1", "Tag2", "Tag3"];
for(i = 0; i < selectedTags.length; i++){
var currentTagName = selectedTags[i];
var currentItemCount = this.getItemsCountByTagName(currentTagName, items);
tagNameItemCount.push({tagName: currentTagName, tagCount: currentItemCount});
}
return tagNameItemCount;
},
getItemsCountByTagName: function (tagName, items) {
var taggedItems = _.filter(items, function(item){ return _.include(item.tags, tagName); });
return taggedItems.length;
},
</snip>
