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未捕获的TypeError：无法处理绑定 “ foreach：function（）{退货计划}”消息：无法处理绑定“已检查：function（）{返回$ root.selectedPlan}”消息：无法读取未定义的属性“ selectedPlan”

出于某种原因，看来$root关键字是undefined ...

编辑：计划的结构

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

Answer 1

看看这个例子：

<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>

我所做的一些更改：

没有使用attr绑定，而是直接使用value和checked
我曾经使用$parent来达到最高水平，但是$root也可以工作
我对html进行了一些更改，以使其一行等。

Answer 2

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

从淘汰赛站点上

$ component

如果您位于特定组件模板的上下文中，则   $ component引用该组件的视图模型。这是   特定于组件的等效于$ root。在嵌套的情况下   组件，$ component引用最接近的视图模型   组件。

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

请查看Knockout Binding Context页面以获取更多信息。

淘汰JS foreach $ root未定义

2 个答案: