javascript - 如何在大型 SPA 中嵌套基于 knockout.js 的组件？

Question

我目前正在试验 SPA，我的第一个应用程序的结构大致遵循即将出版的书 Single Page Web Applications 中描述的模式。作者 Mikowski/Powell:该应用程序由相互嵌套的模块组成。一个根模块有一个或多个子模块，每个子模块可能有一个或多个自己的子模块。为了将子模块添加到 DOM，父模块向子模块提供了一个 (jQuery-) 元素，它附加了自己的标记。除此之外，模块或多或少是完全隔离的，它们的功能对 SPA 的其余部分无关紧要。每个模块都驻留在自己的文件中，并且使用 require.js 解决依赖关系(本书手动导入它们)。

现在我想使用 knockout.js 来呈现一些模块，但我对 ko 相当陌生，所以我想知道:想象一下顶级模块附加了几个子模块。它使用 knockout.js 进行绑定(bind)，而其中一个子模块也使用 knockout.js 进行绑定(bind)，而另一个子模块则不使用。每个当然都有自己的模型数据。

1. 如果我在父级和子级中应用 ko-bindings(仅限于各自的容器元素)，当子级标记实际上包含在父级标记中时，它们是否会以某种方式干扰？
2. 在这种情况下，我将如何实现 require.js 依赖项解析？

一个可以很好地说明问题的例子是“选项卡式面板”:父级有几个选项卡，并使用 knockout 来确定哪个选项卡当前可见。每个选项卡本身就是一个模块，本身可以具有任意复杂的标记/功能，因此应该封装在自己的文件/模块中。

Answer 1

您不会希望先在父元素上调用 ko.applyBindings，然后再在其子元素之一上调用。元素将被绑定(bind)两次，尽管在大多数情况下您只会遇到错误，因为 child 可能会尝试针对不同的上下文进行绑定(bind)。

几个选择:

1 - 如果元素不重叠，则可以调用 ko.applyBindings 并指定第二个参数，即用作根元素的 DOM 元素。这看起来像:

ko.applyBindings(viewModelOne, document.getElementById("one"));
ko.applyBindings(viewModelTwo, document.getElementById("two"));

2 - 不过在您的问题中，Knockout 似乎会管理选项卡和每个选项卡的内容，其中各个选项卡可能是子元素。一种选择是创建一个包含 subview 模型的整体 View 模型，例如:

var ViewModel = function() {
   this.tabs = ko.observableArray();
   this.selectedTab = ko.observable();
};

然后“选项卡”对象可以包含它们自己的 View 模型。它可能是这样的:http://jsfiddle.net/rniemeyer/PctJz/

3-这里描述了一个额外的选择:http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html .这种技术允许您将 View 模型绑定(bind)到整个页面，然后通过调用 ko.applyBindings 将 DOM 元素作为第二个参数来划分出您想要单独绑定(bind)的区域。