knockout.js - 你能在淘汰赛中有重叠的绑定区域吗

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]);

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

如果这种重叠绑定区域会导致任何问题怎么办？

score 1 · Accepted Answer

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

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

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

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

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

如果小部件数组包含 aCalendarWidgetViewModel它将查找CalendarWidgetView模板，如果它还包含 aContactsWidgetViewModel它将查找ContactsWidgetView模板。

使用 nuge 安装

Install-Package Knockout.BindingConventions

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

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

我自己制作了使用上述约定库的

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

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

1 回答 1