淘汰赛 JS foreach $root 未定义

Question

我正在尝试在 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 Uncaught TypeError: Unable to process binding “foreach: function(){return plans }”消息：无法处理 绑定“检查：函数（）{return $root.selectedPlan}”消息： 无法读取未定义的属性“selectedPlan”

由于某种原因，$root 关键字似乎是 undefined...

编辑： 计划结构

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

Answer 1

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

来自淘汰赛：

$组件

如果您处于特定组件模板的上下文中，那么 $component 指的是该组件的视图模型。这是 特定于组件的等效于 $root。在嵌套的情况下 components, $component 指的是最接近的视图模型 组件。

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

请查看Knockout Binding Context 页面了解更多信息。

Answer 2

看看这个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>Selected Plan
  <b><span data-bind="text: selectedPlan"></span></b>
</p>
<div data-bind="foreach: plans">
  <label>
    <input type="radio" name="plan" data-bind="value: title, checked: $parent.selectedPlan"/>
    <span data-bind="html: title"></span>
    <span data-bind="text: desc"></span>
  </label>
</div>

<script type="text/javascript">
  var viewModel = {
    plans: ko.observableArray([
      {id: 1, desc: 'Red Foo', title: 'Foo'}, 
      {id: 2, desc: 'Blue Bas', title: 'Bas'}
    ]),
    selectedPlan: ko.observable()
  };
  ko.applyBindings(viewModel);
</script>

我做了一些改变：

1. 没有使用attr绑定，而是直接使用value和checked
2. 我使用$parent 来达到最高级别，但$root 也可以使用
3. 我稍微更改了 html 以将其放在一行中，等等。