如果您有 one 视图，我很清楚如何使用 Knockout.js。
如果我有多个相互独立的视图，我该如何构建应用程序？我可以想象我应该每个视图都有一个视图模型（当然，因为这是 view 模型的含义），但是如何将 HTML 文件拆分为组件？
例如，我希望每个 HTML sn-ps 在其自己的文件中用于定义视图，而 index.html 仅具有用于添加这些视图的位置的占位符。
我无法想象 Knockout.js 不支持这一点，但到目前为止我发现的所有示例都只是一个视图（就像 TodoMVC 的示例一样）。
如何将一个大的 HTML 文件分成多个文件，每个视图一个文件，然后使用 Knockout.js 将它们组合起来？
【问题讨论】：
标签： architecture knockout.js template-engine
哦，这很容易。 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。
b.您的更新方法应根据通过自定义绑定属性参数提供的值更改内部视图模型的状态。
【讨论】：