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

问题描述

因此，我来​​自一个模板工作流程，该工作涉及创建一个数据对象(类似于挖空中的视图模型)，然后将该数据对象传递给模板引擎(在本例中为jstemplate)，使用该数据对象渲染模板，并将其附加到dom.

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.

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

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.

此外，如果您能告诉我为什么下面的js小提琴无法按我期望的那样工作，请多加信贷.我正在尝试学习if控制流绑定，但这不起作用.

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);

将类似于以下示例: http://jsfiddle.net/rniemeyer/gYk6f/

您还可以执行以下操作:

You can also do something like:

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

然后，将其绑定为:

<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>

关于额外信用"问题:

p标记不能包含其他块级元素(如您的div).浏览器将其移出p标记.将div替换为span，它的行为将与您期望的一样(或将p替换为div).

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).

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