knockout.js - kendoui - Knockout-Kendo Grid con edición por lotes no actualiza el modelo de vista

kendo ui developer

Question

No sé qué hay de malo en mi implementación, pero no puedo actualizar mi viewmodel si estoy usando una KendoUI Grid editable con Knockout-Kendo. Si cambio algún campo de tabla particular y registro el modelo de vista, no obtendrá ninguna actualización.

<button data-bind="click: log">Log ViewModel</button>
<div id="gr" data-bind="kendoGrid: options"></div>
var pStyleHeader_ViewModel = function() {
this.options = {
data: ko.observableArray([{ StyleNo : ko.observable("1BA0012"),
Description : ko.observable(""),
StyleType : ko.observable("10"),
DueDate : ko.observable(new Date("2012-10-31T00:00:00+02:00"))}]),
sortable: true,
columns: [{"field":"StyleNo","title":"Style No"},{"field":"Description","title":"Description"},{"field":"StyleType","title":"Style Type","editor":StyleTypeDropDownEditor,"values":StyleTypeValues},{"field":"DueDate","title":"Due Date","type":"date","format":"{0:MM/dd/yyyy}"}],
editable: true,
selectable: true,
pageable: { pageSize: 5 }
};
ko.applyBindings(new pStyleHeader_ViewModel());

Puede ver un ejemplo aquí: http://jsfiddle.net/aleksanderson/hd5c8/

¿Cuál es la razón de tal comportamiento?

Gracias por adelantado.

Answer 1

La integración de dataSource to KO no es perfecta en este momento. Como el widget de Kendo no sabe cómo manejar observables directamente, ko-kendo proporciona una versión "limpia" de los datos al widget. Esto significa que las actualizaciones de esos datos no se representan automáticamente en los datos del modelo de vista.

Estoy buscando explorar una mejor integración de DataSource con Knockout (probablemente una fuente de datos KO) donde autoSync actualizaría el modelo de vista. Esto es algo que con suerte sucederá en el corto plazo.

Por ahora, hay patrones que puede usar para sincronizar los datos de la grilla con su vm.

Muestra: http://jsfiddle.net/rniemeyer/73mjn/

Aquí hay un modelo de vista de muestra:

var Person = function(data) {
this.first = ko.observable();
this.last = ko.observable();
this.full = ko.computed(this.getFull, this);
//initialize it the first time
this.initialize(data);
};
ko.utils.extend(Person.prototype, {
getFull: function() {
return this.first() + '' '' + this.last();
},
//can be called at anytime to initialize/update data
initialize: function(data) {
this.first(data.first);
this.last(data.last);
}
});
var ViewModel = function() {
this.people = ko.observableArray([
new Person({ first: "Bob", last: "Smith" }),
new Person({ first: "Doug", last: "Jones" }),
new Person({ first: "Sally", last: "Green" })
]);
//store a reference to the widget, so we can get at the modified data
this.people.grid = ko.observable();
//reconcile the grid data with the view model data
this.syncData = function() {
var people = this.people() || [],
gridPeople = this.people.grid().dataSource.data() || [],
person, gridPerson, i, length;
//loop through the grid''s people and update each vm person
for (i = 0, length = gridPeople.length; i < length; i++) {
gridPerson = gridPeople[i];
person = people[i];
//add a new person, if necessary
if (!person) {
people.push(new Person(gridPerson));
} else {
person.initialize(gridPerson);
}
}
};
};