Почему мой BootstrapSwitch не работает в нокаут-таблице, построенной с использованием foreach
Я пытаюсь заменить флажок в таблице с этим красивымзагрузочный переключатель.
Я также использую нокаут и обработчик привязки, как это предлагаетсяссылка.
Однако я не могу заставить работать обработчик привязки и / или переключатель, чтобы можно было щелкнуть мышью в таблице, построенной с использованием нокаута для каждого.
Я повторил проблему вjsfiddle.
Я все еще изучаю javascript и нокаут и просто не могу понять, что происходит в обработчике привязки или переключателе.
Есть идеи?
HTML:
<div>
<input type="checkbox" data-bind="checked: on" />
</div>
<div>
<span data-bind="text: on() ? 'on' : 'off'"></span>
</div>
<div class="switch switch-large" data-bind="bootstrapSwitchOn: on">
<input type="checkbox" />
</div>
<p>Why doesn't this work in a table?</p>
<table class="table table-striped table-condensed table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Old</th>
<th>Old toggle With CheckBox</th>
<th>Old toggle With Switch</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Old"></td>
<td>
<input type="checkbox" data-bind="checked: Old" />
</td>
<td>
<div class="switch switch-large" data-bind="bootstrapSwitchOn: Old">
<input type="checkbox" />
</div>
</td>
</tr>
</tbody>
</table>
Обязательный обработчик и вид нокаута
/**
* Knockout binding handler for bootstrapSwitch indicating the status
* of the switch (on/off): https://github.com/nostalgiaz/bootstrap-switch
*/
ko.bindingHandlers.bootstrapSwitchOn = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$elem = $(element);
$(element).bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
$elem.on('switch-change', function (e, data) {
valueAccessor()(data.value);
}); // Update the model when changed.
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var vStatus = $(element).bootstrapSwitch('status');
var vmStatus = ko.utils.unwrapObservable(valueAccessor());
if (vStatus != vmStatus) {
$(element).bootstrapSwitch('setState', vmStatus);
}
}
};
var vm = {
on: ko.observable(true),
items: ko.observableArray([
{Name: "Dave", Old: ko.observable(false)},
{Name: "Richard", Old: ko.observable(true)},
{Name: "John", Old: ko.observable(false)}
])
}
ko.applyBindings(vm);