Question

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

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

例如，我想在自己的文件中分别使用HTML代码段来定义视图，而index.html只有占位符来添加这些视图。

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

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

Answer 1

哦，这很容易。 Knockout JS中的applyBindings方法接受一个可选的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通过其指令推广了类似的方法。

将窗口小部件的标记设计为文档片段。你可以随心所欲地做到：简单的HTML，一个占位符div，所有渲染和交互都在JavaScript中完成 - 一切都可以。
设计模板的视图模型。想想您的小部件可能需要的数据，以便根据它来呈现和操作并构建您的模型。
为您的小部件创建自定义绑定。最简单的方法是将它放在占位符div元素上。

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

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

如何构建使用多个独立视图的Knockout.js应用程序？

1 个答案: