checkbox data-bind using knockout.js and jquery mobile - jquery-mobile

Question

I am facing problem to data-bind checkbox using knockout.js.
The jsfiddle http://jsfiddle.net/sajesh1985/ypbLN/
(HTML)Code:
<h2>View1</h2>
<h4>Select Columns:</h4>
<ul data-bind="foreach: gridOptions.columns" data-role="listview">
<div data-role="fieldcontain" >
<li id="li">
<label>
<input type="checkbox" id="chk" data-bind="event: {change: function(){ checked(!checked()); } }, checkbox: checked" /> <span data-bind="text: header"></span>
</label>
</li>
</div>
</ul>
<hr>
<table>
<thead>
<tr data-bind="foreach: gridOptions.columns">
<th data-bind="visible:checked, text: header"></th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr data-bind="foreach: $parent.gridOptions.columns">
<td data-bind="text: $parent[dataMember], visible:checked"></td>
</tr>
</tbody>
</table>
JS Code:
var ProductSearchViewModel = {
gridOptions: {
columns: [{
header: 'First Name',
dataMember: 'firstName',
checked: ko.observable(true)
}, {
header: 'Last Name',
dataMember: 'lastName',
checked: ko.observable(true)
}]
},
people: [{
firstName: 'Bert',
lastName: 'Bertington'
}, {
firstName: 'Charles',
lastName: 'Charlesforth'
}, {
firstName: 'Denise',
lastName: 'Dentiste'
}]
};
ko.bindingHandlers.checkbox = {
update: function (element, valueAccessor) {
var value = valueAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
//$(element).checkboxradio().trigger('create');
$(element).attr("checked", valueUnwrapped).checkboxradio("refresh");
}
};
$(document).ready(function () {
ko.applyBindings(ProductSearchViewModel);
});
Can you please help me in rectifying the issue?
I am getting Uncaught cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh' in the browser.

Answer 1

The best way to bind checkboxes is to use the checked binding like here:
<input type="checkbox" id="chk" data-bind="checked: checked" />
See also documentation: http://knockoutjs.com/documentation/checked-binding.html