具有批处理编辑的Knockout-Kendo网格不会更新视图模型 [英] Knockout-Kendo Grid with batch editing doesn't update the viewmodel

问题描述

我不知道我的实现有什么问题，但是如果我在Knockout-Kendo中使用可编辑的KendoUI网格，则无法更新视图模型.如果我更改某些特定的表字段并记录视图模型，它将不会得到任何更新.

I don't know what is wrong with my implementation but I can't get my viewmodel updated if I'm using editable KendoUI Grid with Knockout-Kendo. If I change some particular table field and log the viewmodel it will not get any update.

<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());

您可以在此处看到示例: http://jsfiddle.net/aleksanderson/hd5c8/

You can see an example here: http://jsfiddle.net/aleksanderson/hd5c8/

这种行为的原因是什么?

What is the reason of such behavior?

谢谢.

推荐答案

目前，KO集成的数据源不是无缝的.由于Kendo小部件不知道如何直接处理可观察对象，因此ko-kendo向小部件提供了数据的干净"版本.这意味着对该数据的更新不会自动显示在视图模型数据中.

The dataSource to KO integration is not seamless at the moment. Since, the Kendo widget does not know how to handle observables directly, ko-kendo provides a "clean" version of the data to the widget. This means that updates to that data are not automatically represented in the view model data.

我正在寻找与Knockout(可能是KO数据源)更好的dataSource集成，其中autoSync将更新视图模型.希望这会在短期内发生.

I am looking to explore better dataSource integration with Knockout (likely a KO datasource) where autoSync would update the view model. This is something that will hopefully be happening in the short term.

目前，您可以使用一些模式将数据从网格同步到虚拟机.

For now, there are patterns that you can use to sync the data from the grid to your vm.

示例: http://jsfiddle.net/rniemeyer/73mjn/

这是一个示例视图模型:

Here is a sample view model:

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);   
            }
        }
    };
};

这篇关于具有批处理编辑的Knockout-Kendo网格不会更新视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！