你可以在淘汰赛中拥有重叠的绑定区域吗？

Question

假设我正在使用标记创建类似Windows桌面的内容，例如：

<div id="os">
   <div id="desktop"></div>
   <div id="taskbar"></div>
</div>

然后像这样绑定它：

ko.applyBindings(vm, $("#os")[0]);

如果我然后将这个新标记注入桌面div：

<div id="newWidget">
   ...
</div>

并致电

ko.applyBindings(vm2, $("#newWidget")[0]);

将新标记绑定到完全不同的视图模型，这会有问题吗？

如果这种重叠的绑定区域出现任何问题会怎样？

Answer 1

而不是像使用强大的模板引擎那样插入HTML。 它可以通过多种方式完成，您需要使用标准引擎将templatge作为脚本标记插入，然后像

一样使用

<div data-bind="foreach: widgets">
   <!-- ko template: { name: view, data: $data } --><!-- /ko -->
</div>

上述解决方案需要具有模板名称的成员view。这会在VM和View之间创建耦合，而且模板语法很混乱。

我创建了一个名为Knockout.BindingConventions的库，它是一个隐式库，有利于约定而不是显式配置。它的一个功能是将ViewModels连接到视图。 html看起来像这样

<div data-name="widgets">
   <!-- ko name: $data --><!-- /ko -->
</div>

如果窗口小部件数组包含CalendarWidgetViewModel，它将查找CalendarWidgetView模板，如果它还保留ContactsWidgetViewModel，则会查找ContactsWidgetView模板。< / p>

Wiki

使用nuge安装

Install-Package Knockout.BindingConventions

以上解决方案要求您将模板作为脚本标记

有外部模板源引擎可以使用ajax按需加载模板。

例如https://github.com/ifandelse/Knockout.js-External-Template-Engine

我自己使用了上面的约定库

Wiki

配置完成后（您需要创建一个处理模板请求的休息服务） 这只是做bootstrap.loadView(model, this.view);

的问题

它将查看模型类型解析其视图名称，从缓存或服务器获取该ViewModel的所有视图。