我可以在模板绑定中传递变量吗？答案

【问题标题】：Can I pass a variable in a template binding?我可以在模板绑定中传递变量吗？
【发布时间】：2013-12-06 18:24:43
【问题描述】：

我知道这不是一个长期使用的好方法，但是对于故障排除，有什么方法可以在绑定模板时传递一个简单的字符串，然后将其作为模板中的变量进行访问？例如，如果这是我的绑定：

<!-- ko template: { name: tmplOne }, myvar: 'apple' -->

这是 tmplOne：

<div>
    <span>Fruit: </span>
    <span data-bind="text: myvar"></span>
</div>

这会导致以下结果：

fruit: apple

即使我必须在视图模型中声明一个名为“fruit”的 observable，我可以在模板绑定中手动设置它吗？

【问题讨论】：

标签： knockout.js knockout-templating

【解决方案1】：

使用

<!-- ko template: { name: tmplOne, templateOptions: {myvar: 'apple'} } -->

【讨论】：

这与接受的答案有何不同？ templateOptions 与 data 的区别/优势是什么？
我认为这是解决这个问题的正确方法，不知道为什么它被否决了。
@DevilsAdvocate 底层视图模型和渲染时模板参数是两个不同的东西。接受的答案与视图模型混淆，并在您要求一个简单的渲染时参数时引入了一个新的绑定上下文，保持绑定上下文树不变（如果我理解正确的话）..
很遗憾，templateOptions 不再受支持

【解决方案2】：

您可以为模板绑定提供一个数据参数并定义一个对象字面量，就像您正在做的那样：

<!-- ko template: { name: tmplOne }, myvar: 'apple' -->

改为这样做：

<!-- ko template: { name: tmplOne, data: { myvar: 'apple' } } -->

http://knockoutjs.com/documentation/template-binding.html

【讨论】：

然后我使用“myvar”访问它，就像我在示例中所做的那样？
等等，阅读您刚刚链接的文档，这是否意味着如果我包含数据对象，它将覆盖当前应用的视图模型？
您将访问 $parent 或 $root 对象以获取 'myvar' 对象。
抱歉，我无法理解。现在我所有现有的绑定都不起作用。如何传递现有对象并指定自定义变量？例如，数据：{ $data, myvar: 'apple' }
我认为您已经在模板页面上定义了视图模型。在这种情况下，您将照常使用模型并如前所示访问“myvar”。如果这不起作用，您还可以尝试在模板页面上将“myvar”添加到您的视图模型对象（然后正常访问它）。最后一次尝试只是将您的对象与您刚才建议的另一个变量一起传递，但我认为这没有必要。数据：{ mydata：mydataobject，myvar：'apple'}

【解决方案3】：

对于阅读更高版本淘汰赛的人来说，这似乎是组件与模板的一个很好的用例。

【讨论】：

【解决方案4】：

您可以通过向绑定的data 参数提供组合来将任意数据传递给模板，同时保持当前应用的 viemodel。

例如，您可以将模板内容包装在 with 绑定中，绑定到组合的 $data 属性，从而创建新的绑定上下文。这样，当前应用的绑定就不需要更新了。

ko.applyBindings({
  fruits: ['banana', 'orange']
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="template: { name: 'tmplOne', data: { myModelData: $data, myVar: 'apple' } }"></div>

<script type="text/html" id="tmplOne">
  <!-- ko with: myModelData -->
    <span>My model</span>
    <ul data-bind="foreach: fruits">
      <li data-bind="text: $data"></li>
    </ul>
    <div>
      <span>My custom data:</span>
      <span data-bind="text: $parent.myVar"></span>
    </div>
  <!-- /ko -->
</script>

【讨论】：