我正在构建一个包含两个复杂,明显不同(但有一些共享组件)视图的应用程序。一个视图允许用户运行查询并查看搜索结果,另一个视图概述最近的活动。相关示例可能是具有电子邮件屏幕和联系人屏幕的PIM应用程序。这两组操作完全不同,但之间也存在结构上的相似之处。在构建我的应用程序时,我已经开始使用搜索结果视图。我现在需要创建第二个,并且想知道组织代码的最佳实践。
我是否为每个应用程序“视图”创建一个单独的对象(我认为是子视图模型),并使用if / ifnot绑定在它们之间切换?视图之间的一个共同点是每个视图都有一个可滚动,可过滤,可分页的对象列表。我是否应该尝试分解列表之间的差异,以便我可以拥有一个通用的排序/过滤器UI,或者我只创建两个仅共享我的自定义绑定的并行接口?
谢谢,
基因
答案 0 :(得分:105)
您可以使用此方法进行操作。
一种选择是使用不同的视图模型调用ko.applyBindings
来对抗不同的DOM元素,例如:
var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };
ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));
在这种情况下,你需要确保元素不是彼此的祖先(不想绑定任何东西两次)
另一种选择是使用子视图模型:
var subModelA = { name: "Bob" };
var subModelB = { price: 50 };
var viewModel = {
subModelA: { name: "Bob" },
subModelB: { price: 50 }
};
ko.applyBindings(viewModel);
在此方法中,您将对要在每个视图模型中显示的区域使用with
绑定。您可以使用子模型或顶部模型上的标记来控制可见性。
我喜欢的另一个选择是给你的“观点”一些结构,并做一些类似的事情:
var View = function(title, templateName, data) {
this.title = title;
this.templateName = templateName;
this.data = data;
};
var subModelA = {
items: ko.observableArray([
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" }
])
};
var subModelB = {
firstName: ko.observable("Bob"),
lastName: ko.observable("Smith")
};
var viewModel = {
views: ko.observableArray([
new View("one", "oneTmpl", subModelA),
new View("two", "twoTmpl", subModelB)
]),
selectedView: ko.observable()
};
ko.applyBindings(viewModel);