时间戳

首页 > 解决方案 > 淘汰赛 JS foreach $root 未定义

knockout.js - 淘汰赛 JS foreach $root 未定义

问题描述

我正在尝试在 Knockout JS 中创建一个广播组，这是模板代码

<p>Selected Plan <div data-bind="text: selectedPlan"></div></p>
<div data-bind="foreach: plans">
    <label>
        <input type="radio" name="plan" data-bind="attr: {value: id}, checked: $root.selectedPlan"/>
        <span data-bind="html: title"></span>
        <div data-bind="text: desc"></div>
    </label>
</div>

在组件中selectePlan并plans注册如下

this.plans = ko.observableArray([/* array of plans */]);
this.selectedPlan = ko.observable('xxxxx');

我已经验证这xxxxx是一个有效的条目this.plans。尽管如此，控制台中仍会出现错误

knockout.js:3391 未捕获类型错误：无法处理绑定“foreach: function(){return plans}”消息：无法处理绑定“checked:function(){return $root.selectedPlan}”消息：无法读取属性“selectedPlan” ' 未定义的

似乎$root关键字undefined出于某种原因......

编辑：计划结构

[{
 id: 'xxxxx',
 desc: 'This is a great plan',
 title: '<strong>Save with great plan</strong>',
},
...
]

标签： knockout.js

解决方案

我知道这已经得到解答，但我想你仍然想知道为什么 $root 是未定义的（我会）。我可以看到您在这里和那里谈论“组件”。可能就像您尝试获取组件的根一样简单，因此$component？

从淘汰赛网站：

$组件

如果您在特定组件模板的上下文中，则 $component 指的是该组件的视图模型。它是特定于组件的 $root 等价物。在嵌套组件的情况下，$component 指的是最近组件的视图模型。

这很有用，例如，如果组件的模板包含一个或多个 foreach 块，您希望在其中引用组件视图模型而不是当前数据项上的某些属性或函数。

请查看敲除绑定上下文页面了解更多信息。

推荐阅读