4

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

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

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

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

4

1 回答 1

7

您不会希望先调用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();
};

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

3-此处描述了另一种替代方法：http ://www.knockmeout.net/2012/05/quick-tip-skip-binding.html 。ko.applyBindings此技术允许您将视图模型绑定到整个页面，然后使用 DOM 元素作为第二个参数的调用来划分您想要单独绑定的区域。

于 2012-12-08T13:18:43.953 回答