KendoUI Mobile switch and datasource
- by OnaBai
I'm trying to have a list of items displayed using a listview, something like:
<div data-role="view" data-model="my_model">
<ul data-role="listview" data-bind="source: ds" data-template="list-tmpl"></ul>
</div>
Where I have a view using a model called my_model and a listview where the source is bound to ds.
My model is something like:
var my_model = kendo.observable({
ds: new kendo.data.DataSource({
transport: {
read: readData,
update: updateData,
create: updateData,
remove: updateData
},
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
name: { type: "string" },
active: { type: "boolean" }
}
}
}
})
});
Each item includes an id, a name (that is a string) and a boolean named active.
The template used to render each element is:
<script id="list-tmpl" type="text/kendo-tmpl">
<span>#= name # : #= active #</span>
<input data-role="switch" data-bind="checked: active"/>
</script>
Where I display the name and (for debugging) the value of active. In addition, I render a switch bound to active.
You should see something like:
The problems observed are:
If you click on a switch you will see that the value of active next to the name changes its value (as expected) but if then, you pick another switch, the value (neither next to name nor in the DataSource) is not updated (despite the value of the switch is correctly updated).
The update handler in the DataSource is never invoked (not even for the first chosen switch and despite the DataSource for that first toggled switch is updated).
You can check it in JSFiddle: http://jsfiddle.net/OnaBai/K7wEC/
How do I make that the DataSource gets updated and update handler invoked?
