2013-07-25 58 views
1

我想在Kendo Grid中創建一個雙向綁定。在Kendo Grid中使用編輯功能並在視圖模型上使用計算可觀察對象時,必須使用2路綁定。我能找到的唯一的解決辦法是:如何立即刷新與可編輯KnockOut-Kendo Grid綁定的KO.Computed字段?

Knockout-Kendo Grid with batch editing doesn't update the viewmodel

基於與KO.computed場以上的解決方案,該樣品

Kendo grid with ko.computed field

創建feedle,編輯的數據不更新查看模型,直到我們點擊「同步」按鈕。如何立即更新?

這裏是我的解決方案:

var grid = $("#grid").data("kendoGrid"); 
grid.bind("save", grid_save); 
grid_save = function (e) { 
     if (e.values.first) { // Check if the first name changed 
      if (e.values.first != e.model.first) {// Compare with previous value 
       var people = self.people() || []; // Navigate through KO view model 
       $.each(people, function() { 
        if (this.first() == e.model.first) { 
         this.first(e.values.first); // Update KO View Model 
        } 
       }); 
      } 
     } 

Here is fiddle for Kendo grid with Ko.computed refreshing immediately

我想馬上更新我的視圖模型採用網格的保存事件。這意味着這個事件將在每個單元格更改時觸發。看起來很醜陋。 還有沒有其他優雅的解決方案?

回答

0

我已更新您的fiddle以下內容。 除了循環遍歷所有數據,您只能更新已更改的行。

http://jsfiddle.net/Kunfc/6/

var getWidget = function (elem){ 
    return $(elem).data('kendoGrid'); 
}; 

var updateModel = function (model, modelChanges){ 
    for (prop in modelChanges) { 
     model[prop](modelChanges[prop]); 
    } 
}; 

    this.grid_save = function (e) { 
      var grid = $("#grid"); 
      var widget = getWidget(grid.get(0)); 
      var gridData = widget.dataSource.data(); 

      var row = $(e.container).closest("tr"); 
      var rowIdx = grid.find("tr").index(row); 
      var colIdx = widget.cellIndex(e.container);//$("td", row).index(this); 

      var idx = gridData.indexOf(e.model); 

      var model = self.people()[idx]; 
      updateModel(model, e.values); 
     }; 

希望這有助於