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

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

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

例如，我希望在每个文件中都有HTML片段，用于定义视图，而

index.HTML

中只有用于添加这些视图的占位符

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

如何将一个大HTML文件分解为多个文件，每个视图一个，然后使用Knockout.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通过其指令推广了类似的方法

将小部件的标记设计为文档片段。你可以做任何你想做的事情：简单的HTML，一个占位符

div

，所有的渲染和交互都用JavaScript完成——一切都可以

为模板设计视图模型。想一想小部件可能需要哪些数据来呈现、操作和根据这些数据构建模型

为小部件创建自定义绑定。最简单的方法是将它放在占位符

div

元素上

a。您的

init

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

div

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

---

这仍然要求我将所有内容都放在一个HTML文件中。我如何加载HTML代码段（当然不用手动加载）？@GoloRoden看起来你和我今天的想法很相似。你的答案有一部分是在，但听起来我们在看同一个基本问题。哈哈，看起来是：-）！