2

如果您有一个视图，我很清楚如何使用 Knockout.js 。

如果我有多个相互独立的视图，如何构建应用程序？我可以想象我应该每个视图都有一个视图模型（当然，因为这是视图模型的含义），但是如何将 HTML 文件拆分为组件？

例如，我希望在其自己的文件中分别包含用于定义视图的 HTML 片段，并且index.html只有占位符用于添加这些视图的位置。

我无法想象 Knockout.js 不支持这一点，但到目前为止我发现的所有示例都只是一个视图（就像TodoMVC的示例一样）。

如何将一个大的 HTML 文件分成多个文件，每个视图一个，然后使用 Knockout.js 将它们组合起来？

4

1 回答 1

3

哦，这很容易。applyBindingsKnockout JS 中的方法接受一个可选的 DOM 元素作为第二个参数。因此，在您的情况下，您可以执行以下操作：

ko.applyBindings(myViewModel, 
    document.getElementById('myModuleWrapperDiv'));
ko.applyBindings(otherViewModel, 
    document.getElementById('otherModuleWrapperDiv'));

唯一的问题是您将无法在单个 DOM 子树中混合和匹配来自两个视图模型的绑定。例如，此标记将起作用：

<div id="myModuleWrapperDiv">
    ...
</div>
<div id="otherModuleWrapperDiv">
    ...
</div>

但是，这不会：

<div id="myModuleWrapperDiv">
    ...
    <div id="otherModuleWrapperDiv">
        ...
    </div>
</div>

以下是我使用 Knockout 制作小部件的方法。请注意，在 95% 的情况下，只需加载模板并对其应用绑定即可。但是，如果您需要一个打包的小部件（即作为一个单独的组件发布的东西），最好的方法是将其包装在自定义绑定中。Angular JS 通过它的指令推广了类似的方法。

  1. 为您的小部件设计标记作为文档片段。你可以做任何你想做的事：简单的 HTML，一个占位符div，所有的渲染和交互都在 JavaScript 中完成——一切都会做。

  2. 为您的模板设计一个视图模型。想想你的小部件可能需要的数据来渲染、操作和构建你的模型。

  3. 为您的小部件创建自定义绑定。最简单的事情是将它放在占位符div元素上。

    一种。您的init方法应该加载模板并将内部小部件视图模型的绑定应用到它。应用绑定后，您可以将生成的文档片段附加到占位符div。

    湾。您的更新方法应该根据通过自定义绑定属性参数提供的值来更改内部视图模型的状态。

于 2013-03-16T09:54:17.573 回答