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

Question

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

现在我想使用knockout.js渲染一些模块,但我对ko很新,所以我想知道:想象一下顶层模块附加了几个子模块.它使用knockout.js进行绑定,而其中一个子模块也执行绑定,但另一个子模块没有.每个人当然都拥有自己的模型数据.

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

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

Answer 1

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

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

3-a另一种替代方案如下:http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html.此技术允许您将视图模型绑定到整个页面,但随后将调用ko.applyBindingsDOM元素作为第二个参数分别绑定到区域.