Я пытаюсь создать радиогруппу в 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>
Несколько изменений, которые я сделал:
attr
, вместо этого сделал прямое value
и checked
$parent
чтобы добраться до верхнего уровня, но $root
тоже работает