knockout.js - 模板的延迟加载

Question

因此，我来​​自一个模板工作流程，该工作流程涉及创建一个数据对象（类似于淘汰赛中的视图模型），将其传递给模板引擎（在我们的例子中为 jstemplate），使用该数据对象渲染模板，并将其附加到 dom。

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

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

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

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

Answer 1

您可以采取以下几个方向：

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

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

您甚至可以将其数据的绑定动态地应用到元素，例如：

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

就像这个示例：< a href="http://jsfiddle.net/rniemeyer/gYk6f/" rel="noreferrer">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: 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 标记不能包含其他块级元素（例如您的 div）。浏览器将其移出 p 标记。将您的 div 替换为 span，它将表现得像您期望的那样（或将 p 替换为 div）。

Answer 2

我知道答案仍然很旧，我想你会有兴趣看看这个。这是我的模式。有人可能会说我滥用了 knockoutjs 的概念，但它是……它有效！

首先，您需要添加一个空模板，这是淘汰赛加载至少一个模板所必需的。如果你提供了无效的东西，knockoutjs 将无法工作并中止它正在做的事情......

假设你有这个。

<script type="text/html" id="template-emtpy">

</script>

现在很酷，让我们看看模板在淘汰赛中是如何工作的，淘汰赛模板实际上只是一个绑定，因此它会在运行时进行检查，并且在工作之前您可以做所有奇特的事情。这意味着你可以拥有类似的东西。

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

其中 activeTemplate 可以是一个可观察的对象！哦，所以可观察对象确实在那里工作......当可观察对象发生变化时，模板会收到通知，并且实际上会使用正确的模板重新渲染。

现在您了解了我们实际上可以设置模板并在将来更改它，您也了解了在加载模板之前我们将发送空模板。不会有任何绑定错误，因为没有任何东西可以绑定！

现在让我们来看看这个吧！

<div data-bind="template: { name: getTemplate('reports'), data: contentModel }"></div>

其中 getTemplates 定义为：

window.getTemplate = function (name) {
    var baseUrl = "/templates/";

    var loaded = ko.observable(false);

    var template = document.getElementById('template-' + name);

    if (template) {
        loaded(true);
    } else {
        jQuery.get(baseUrl + name + '.html', function (data) {
            var scriptTag = $('<script type="text/html" id="template-' + name + '"></script>');
            scriptTag.html(data);
            $('head').append(scriptTag);
            loaded(true);
        });
    }

    return ko.computed(function () {
        if (loaded()) {
            return 'template-' + name;
        } else {
            return "template-empty";
        }
    })();
};

总而言之，我们正在创建一个默认加载为 false 的可观察对象。如果找到模板，我们会将值更改为 true。如果没有，我们将尝试使用 jQuery 加载它（用您喜欢的任何方式加载它...您绝对可以放置一个文本区域并从那里加载模板。一切皆有可能...）。

我们返回一个计算值，该值取决于加载的可观察值。当loaded变为true时，它将返回已加载模板的id。由于某些原因，knockoutjs 要求文本位于脚本 html 标记内。这就是为什么我用 html 更新 script 标签。

就是这样。另外，我可能是错的，我不确定淘汰赛如何处理模板，但可以打开和关闭加载以重新加载模板......这意味着您可以拥有动态加载和可编辑的模板！ ！

另请注意，我在返回计算值之前执行了计算值。请注意，该函数是全局的......要解决这个问题！创建您自己的绑定来制作类似的东西：

<div data-bind="lazy_template: { name: "reports", data: contentModel }"></div>

然后您就可以开始了。您所要做的就是将加载逻辑放入自定义绑定中。

我将在 github 上创建一个项目，一切正常，希望它能有所帮助。稍后我会更新网址。

可能不稳定，因为我在半小时内破解了它，但它对我有用。有一天我可能不得不写一些测试，但无论如何。玩得开心！
https://github.com/llacroix/knockout-lazy-template