在淘汰赛 1.3 中将选项传递给模板答案

【问题标题】：Passing options to templates in knockout 1.3在淘汰赛 1.3 中将选项传递给模板
【发布时间】：2023-03-14 22:20:01
【问题描述】：

在 knockoutjs 1.2.1 中我可以这样做：

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>

<script id='Bar'>
    {{if $item.fooMode}} FOO! {{/if}}
</script>

我试图将其翻译成淘汰赛 1.3.0beta

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>

<script id='Bar'>
    <span data-bind="if: $item.fooMode">FOO!</span>
</script>

但是新的原生模板引擎不尊重 templateOptions。

还有其他方法可以将任意数据传递到模板中吗？

【问题讨论】：

标签： javascript knockout.js templating knockout-templating

【解决方案1】：

正如您所发现的，本机模板引擎不支持 templateOptions，它是 jQuery 模板插件的 options 功能的包装器。

您可以采用两种方式：将您的数据放在您的视图模型上，并在您的模板中使用$root.fooMode 或$parent.fooMode。这将是最简单的选择。

否则，如果您不希望视图模型中的值，那么您可以使用自定义绑定来操作上下文，例如：

ko.bindingHandlers.templateWithOptions = {
    init: ko.bindingHandlers.template.init,
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        //if options were passed attach them to $data
        if (options.templateOptions) {
           context.$data.$item = ko.utils.unwrapObservable(options.templateOptions);
        } 
        //call actual template binding
        ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, context);
        //clean up
        delete context.$data.$item;
    } 
}

这是一个正在使用的示例：http://jsfiddle.net/rniemeyer/tFJuH/

请注意，在foreach 场景中，您会在$parent.$item 上找到您的选项，而不仅仅是$item。

【讨论】：

非常感谢。我有一种感觉，bindingHandlers 可能会把我带到我想要的地方，但我需要很长时间才能弄清楚。
谢谢，这对我帮助很大。虽然它最初没有工作，但我通过将 context.$data.$item 更改为 context.$templateOptions 来实现它。
请注意，第一次应用绑定后，选项 ($item) 不会传递 - 因为它们已被删除 - 这使得添加和修改元素无法使用

【解决方案2】：

我会建议 Sanderson 的建议，您可以将新文字传递给包含模型和额外数据（模板选项）的模板数据。

data-bind="template: { name: 'myTemplate', data: { model: $data, someOption: someValue } }"

工作演示http://jsfiddle.net/b9WWF/

来源https://github.com/knockout/knockout/issues/246#issuecomment-3775317

【讨论】：

Vukoje，非常棒的洞察力——救了我！非常好的、非笨拙的、自适应的方法——谢谢！