主干:同一模型的多个视图模型
Backbone: multiple View Models for the same model
新手骨干问题:
上下文:用主干构建购物清单
我有一个模型类名为名称,描述和标签(数组)属性。我想基于这个模型或这个模型的集合创建两个视图。
第一个视图将像这样显示所有项:
<ul>
<li><h3>Item 1 Name</h3>
<p>Item 1 Description</p>
<p>Tag1, Tag2 ,Tag3</p>
</li>
.......
</ul>
第二个视图将显示标记列表和标记项的计数,如下所示:
<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>
我构建了模型、集合和视图来支持第一个视图。我想知道使用现有模型(或创建新模型?)来构建第二个视图的正确方法。
Thanks in advance…
现有的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');
}
});
UPDATE:即使重写parse()方法在显示带有项目计数的标签名称时有效,但在添加新项目后,我无法刷新标签名称/项目计数列表。这可能是由于视图呈现来自不同集合的事实。我将尝试扩展ItemList集合并覆盖parse()方法。如有任何帮助,不胜感激。
@machineghost is right on;模型与视图完全解耦,因此您可以根据需要将任意多的视图附加到相同的模型上。如果视图具有您希望共享的逻辑或属性,您还可以扩展视图。当我使用Backbone时,我经常发现自己扩展父视图只是为了覆盖render
函数,或者提供一个不同的模板。
ShoppingCartView = Backbone.View.extend({
model: ShoppingCart
...
});
第二个独立视图
CheckoutView = Backbone.View.extend({
model: ShoppingCart
...
});
第二视图扩展第一视图
CheckoutView = ShoppingCartView.extend({
template: a_different_template // syntax depends on your templating framework
...
});
我自己对Backbone.js也很陌生,所以对这个答案持保留态度,但我认为…你只需要做第二个视图。解耦模型和视图的全部意义在于,如果你只想对视图做一些不同的事情,你就不需要对模型做任何事情。
所以,我认为你只需要创建YourView2,告诉它使用与YourView1相同的模型,你应该在业务
来自Backbone.js google组的Paul Yoder提供了解决方案。可以在这里查看
经过一番调查,我找到了Collection。解析方法,似乎是在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>
- 角度指令没有更新模型视图
- “渲染骨干模型视图”返回未定义的结果
- 轮询更新主干模型/视图的请求
- 节点.js中的模型-视图-控制器模式
- 图像数据中的更改未反映在模型视图中
- 自定义 ngModel 指令以支持 jquery 插件中的模型>视图绑定
- 优化显示简单项目列表的模型/视图
- 建议:在JavaScript中难以使用模型视图控制器
- 将三维世界矢量转换为模型视图矩阵
- 在主干模型/视图上处理更复杂的验证逻辑(必填字段等)的最佳方式
- AngularJS在POST http请求上更新模型/视图
- web应用程序模型视图中的Java脚本
- 我的第一个骨干模型/视图.我的思路对吗?
- Knockoutjs的日期时间字段更新不会刷新模型视图
- Backbone.js中的嵌套集合/模型视图管理
- Javascript“this"模型视图演示器设计中的问题
- 模型视图控制器-javascript mvc框架设计实践,用于编辑就地界面
- 模型视图控制器-任何使用javascript mvc的人
- 模型视图控制器-我们是否在使用JavaScriptMVC(MVVM)框架,如Backbone.js、Angular等
- 模型视图控制器-AngularJS中是否可以在经典的javascript函数中使用数据绑定