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

问题描述

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

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 小部件不知道如何直接处理 observable，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 数据源)更好的数据源集成，其中 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 Grid 不会更新视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！