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

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

现在我想使用knockout.js来渲染一些模块，但我对ko还比较陌生，所以我想知道：假设一个顶级模块附带了几个子模块。它使用knockout.js进行绑定，而其中一个子模块也使用knockout.js，但另一个子模块不使用。当然，每个模型都有自己的模型数据

如果我在父元素和子元素中应用ko绑定（仅限于各自的容器元素），那么当子元素的标记实际上被父元素的标记包围时，它们是否会以某种方式相互干扰

在这种情况下，我将如何实现require.js依赖项解析

---

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

您将不希望在父元素上调用

ko.applyBindings

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

有两种选择：

1-如果元素不重叠，则可以调用

ko.applyBindings

并指定第二个参数，该参数是要用作根元素的DOM元素。这看起来像：

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

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

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

“选项卡”对象可以包含它们自己的视图模型。可能是这样的：

---

3-此处描述了另一个备选方案：。此技术允许您针对整个页面绑定视图模型，但随后通过调用

ko.applyBindings

，将DOM元素作为第二个参数，分割出要单独绑定的区域。

只要保持数据绑定语句相应嵌套，就不会有干扰。依赖于父对象的HTML仅指父对象，其中的选项卡仅对应于活动选项卡或选定选项卡。非常感谢您详细的答复。第3个看起来很像我需要的东西。我希望找到这个问题的最新答案，因为3.2已经推出了组件…我已经读过了，但我仍然在思考如何构建组件