用于多视图应用的knockoutjs模式的示例
我正在构build一个包含两个复杂的，显着不同（但有一些共享组件）视图的应用程序。 一个视图允许用户运行查询并查看search结果，而另一个视图则概述最近的活动。 一个相关的例子可能是一个具有电子邮件屏幕和联系人屏幕的PIM应用程序。 这两套行动是完全不同的，但在那之间也有结构上的相似之处。 在构build我的应用程序时，我已经开始使用search结果视图。 我现在需要创build第二个，并且想知道组织代码的最佳实践。
我是否为每个应用程序“视图”创build一个单独的对象（我猜是子视图模型），并用if / ifnot绑定在它们之间切换？ 视图之间的一个共同点是每个对象都有一个可滚动的，可过滤的，可分页的对象列表。 我应该尝试列出列表之间的差异，以便我可以有一个共同的sorting/filter用户界面，或者我只是创build两个并行接口，只有共享我的自定义绑定？
谢谢，
基因
有几个方向，你可以去这个。
一个选项是调用ko.applyBindings与独立的视图模型对单独的DOM元素，如：
var viewModelA = { name: "Bob" }; var viewModelB = { price: 50 }; ko.applyBindings(viewModelA, document.getElementById("aContainer")); ko.applyBindings(viewModelB, document.getElementById("bContainer"));
在这种情况下，你会想要确保元素不是彼此的祖先（不想两次绑定任何东西）
另一种select是使用子视图模型：
var subModelA = { name: "Bob" }; var subModelB = { price: 50 }; var viewModel = { subModelA: { name: "Bob" }, subModelB: { price: 50 } }; ko.applyBindings(viewModel);
在这种方法中，您将使用绑定到您想要显示每个视图模型的区域。 您可以使用子模型或顶级模型上的标志来控制可见性。
我喜欢的另一个select是给你的“意见”一点结构，做一些事情：
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);
