Knockout.js - 模板的延迟加载 [英] knockout.js - lazy loading of templates

问题描述

所以我来自一个模板工作流，它涉及创建一个数据对象(类似于淘汰赛中的视图模型)将其传递给模板引擎(在我们的例子中为 jstemplate)，使用该数据对象呈现模板，并将其附加到dom.

如何通过淘汰赛实现类似的工作流程?如果"控制流是我正在寻找的吗?或者将我的模板粘贴在没有数据绑定属性的脚本标签中，稍后动态添加它们并处理像 ko.applyBindings(viewModel, node) 这样的模板?

我很好奇其他人如何使用淘汰赛延迟加载模板.

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

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

解决方案

您可以按照以下几个方向进行操作:

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

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

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

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

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

您还可以执行以下操作:

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

然后，像这样绑定:

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

它们甚至可以嵌套:

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

由于模型是可观察的，它们最初可以是空的，然后按需填充.

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

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

对于额外学分问题:

p 标签不能包含其他块级元素(比如你的 div).浏览器将其移出 p 标签.用 span 替换你的 div，它的行为就像你期望的一样(或者用 div 替换 p).

So I come from a templating workflow that involves creating a data object (akin to a view model in knockout) passing that to a templating engine (jstemplate in our case), rendering the template using that data object, and appending it to the dom.

How do I achieve a similar work flow with knockout? Is the "if" control flow what I'm looking for? Or sticking my templates in script tags without data-bind attributes and adding them dynamically later and processing the template like ko.applyBindings(viewModel, node)?

I'm curious how others lazy load templates using knockout.

Also, extra credit if you can tell me why the js fiddle below doesn't work as I would expect it to. I'm trying to learn the if control flow binding and this doesn't work.

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

解决方案

There are several directions that you can go for something like this:

you can apply different view models to different elements, as you mentioned like:

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

You can even dynamically apply a binding with its data to an element like:

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

Would be like this sample: http://jsfiddle.net/rniemeyer/gYk6f/

You can also do something like:

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

Then, bind it like:

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

They, can even be nested like:

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

Since, the models are observable, they can initially be empty and get populated on demand.

You can certainly use named templates in those cases as well like:

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

For the Extra Credit question:

p tags cannot contain other block level elements (like your div). The browser moves it out of the p tag. Replace your div with a span and it will behave like you are expecting (or replace p with div).

这篇关于Knockout.js - 模板的延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！