Knockout 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 Uncaught TypeError: Невозможно обработать привязку "foreach: function () {returnplan}" Сообщение: Невозможно обработать привязку "флажок: function () {return $ root.selectedPlan}" Сообщение: невозможно прочитать свойство selectedPlan 'из неопределенного

Кажется, ключевое слово $root по какой-то причине undefined определено ...

РЕДАКТИРОВАТЬ: Структура планов 

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

Всего 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>

Несколько изменений, которые я сделал:

  1. Не использовал привязку attr , вместо этого сделал прямое value и checked
  2. Я использовал $parent чтобы добраться до верхнего уровня, но $root тоже работает
  3. Я немного изменил HTML, чтобы получить его в одной строке и т. Д.

Есть идеи?

10000