knockout.js - 模板的延迟加载

Question

所以我来自一个模板工作流程，该工作流程涉及创建一个数据对象(类似于 knockout 中的 View 模型)，将其传递给模板引擎(在我们的例子中是 jstemplate )，使用该数据对象渲染模板，并将其附加到大教堂。

如何通过 knockout 实现类似的工作流程？ “if”控制流是我正在寻找的吗？或者将我的模板粘贴在没有数据绑定(bind)属性的脚本标记中，然后动态添加它们并像 ko.applyBindings(viewModel, node) 一样处理模板？

我很好奇其他人如何使用 knockout 来延迟加载模板。

另外，如果你能告诉我为什么下面的 js fiddle 不能像我期望的那样工作，那就额外加分了。我正在尝试学习 if 控制流绑定(bind)，但这不起作用。

http://jsfiddle.net/JJgJ7/1/

Answer 1

您可以通过几个方向来实现这样的目的:

您可以将不同的 View 模型应用于不同的元素，正如您提到的:

var viewModelOne = { ...  };
var viewModelTwo = { ...  };
ko.applyBindings(viewModelOne, containerElementOne);
ko.applyBindings(viewModelOne, containerElementOne);

您甚至可以动态地将绑定(bind)及其数据应用到元素，例如:

var viewModelOne = { ... };
ko.applyBindingsToNode(containerElement, { template: { name: 'itemTemplate', foreach: items }, viewModelOne);

就像这个示例:http://jsfiddle.net/rniemeyer/gYk6f/

您还可以执行以下操作:

var mainViewModel = {
   sideBarModel = ko.observable(),
   contentModel = ko.observable()
};

然后，将其绑定(bind)如下:

<div data-bind="with: contentModel"></div>
<div data-bind="with: sideBarModel"></div>

它们甚至可以像这样嵌套:

<div data-bind="with: contentModel">
   ...
   <div data-bind="with: $root.sideBarModel"></div>
</div>

由于模型是可观察的，因此它们最初可以为空，并根据需要进行填充。

在这些情况下，您当然也可以使用命名模板，例如:

<div data-bind="template: { name: "contentTmpl", data: contentModel }"></div>
<div data-bind="template: { name: "sideBarTmpl", data: sideBarModel }"></div>

对于额外学分问题:

p 标签不能包含其他 block 级元素(例如 div)。浏览器将其移出 p 标记。将您的 div 替换为 span，它将表现得像您期望的那样(或将 p 替换为 div)。