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

Question

我目前正在试验SPA，我的第一个应用程序的结构大致遵循了即将出版的Mikowski/Powell的书“单页面Web应用程序”中描述的模式:这个应用程序由相互嵌套的模块组成。一个根模块有一个或多个子模块，每个子模块都可能有自己的一个或多个子模块。要将子模块添加到DOM中，父模块向其附加自己标记的子模块提供一个(jQuery-)元素。除此之外，模块或多或少是完全隔离的，它们的工作方式对SPA的其他部分并不重要。每个模块驻留在自己的文件中，依赖项使用require.js解析(书中手动导入它们)。

现在我想使用knockout.js来呈现一些模块，但是我对ko还不太熟悉，所以我想知道:想象一个顶级模块附带了几个子模块。它使用knockout.js来完成它的绑定，而其中的一个子模块也这样做，但是另一个没有。当然，每个子模块都有自己的模型数据。

1. 如果我在父元素和子容器中应用ko绑定(仅限于相应的容器元素)，当其子标记实际上被父元素的标记所包围时，它们是否会产生某种干扰？
2. 在这种情况下，我将如何实现require.js依赖解析？

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

Answer 1

您将不希望对父元素调用ko.applyBindings，然后调用其子元素之一。元素将被绑定两次，尽管在大多数情况下您只会得到错误，因为子元素可能试图绑定到不同的上下文。

有几个选择：

1-如果元素不重叠，则可以调用ko.applyBindings并指定第二个参数作为根元素使用的DOM元素。这看起来应该是：

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

在您的问题中，似乎Knockout将管理每个选项卡和每个选项卡的内容，其中单个选项卡可能是子元素。一个选择是创建一个包含子视图模型的总体视图模型，如下所示：

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

然后，"tab“对象可以包含它们自己的视图模型。可能是这样的：http://jsfiddle.net/rniemeyer/PctJz/

3-这里描述了另一种备选方案：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html。该技术允许您将视图模型绑定到整个页面，但随后通过调用DOM元素作为第二个参数，将希望单独绑定的区域划分出来。