为啥我的复选框在 dataSource 已同步但传入数据已正确修改后重置？

Posted 2023-05-07

【中文标题】为啥我的复选框在 dataSource 已同步但传入数据已正确修改后重置？

【英文标题】：Why my checkbox resets after dataSource has been synced but incoming data is modified correctly?为什么我的复选框在 dataSource 已同步但传入数据已正确修改后重置？

【发布时间】：2015-03-09 07:57:38

【问题描述】：

我正在使用 kendoUi 以通过 REST API 与我的后端服务器连接。当前的目标是使布尔字段可以在网格中进行更改。我按以下方式进行。

    function onLoad() 
var Task = kendo.data.Model.define(
    id : "id",
    fields : 
        "id" :  type: "number",
        "date" :  type: "date", 
        "done" :  type: "boolean",
        "class" :  type: "string",
        "title" :  type : "string" 
    
);

var dataSource = new kendo.data.DataSource(
    type: "jsonp",
//    autoSync: true,
    transport: 
       read: "http://localhost:9090/todo-backend/tasks",
       update: 
            type: "PUT",
            contentType: "application/json"
        ,
        parameterMap: function(data, operation) 
            if (operation === "update") 
                return JSON.stringify(data);
            
            return data;
        
    ,
    schema: 
        model: Task
    
);

var selectedTask;

$("#grid").kendoGrid( 
     dataSource: dataSource,
     selectable: true,
     columns: [ field: "done", title: "Done" , template: "<input type='checkbox' class='cb_done' data-bind='checked:done', #= done ? checked='checked' : '' #/>" ,
           field: "title", title: "Task"],
     change: function() 
         var title;
         this.select().each(function() 
             var dataRow = grid.dataItem($(this));
             title = dataRow.title;
             selectedTask = dataRow;
         )

         this.dataSource.transport.options.update.url= "http://localhost:9090/todo-          backend/tasks/" + selectedTask.id;

         $("#change-title").val(title);

);

var grid = $("#grid").data("kendoGrid");

grid.tbody.on("change", ".cb_done", function (e) 
    var row = $(e.target).closest("tr");
    var item = grid.dataItem(row);
    item.set("done", $(e.target).is(":checked"));
    dataSource.sync();
);

$("#change-task").click(function() 
    var val = $("#change-title").val();
    selectedTask.set("title", val);
    dataSource.sync();
    dataSource.read();
)



window.onload=onLoad;

为了实现这种方法，我阅读了：checkbox binding、dataSource.columns、kendo.data.Model 和 this、this、this

当我尝试同步 dataSource() 时，我的复选框 (cb) 重置为无效状态。并且只有在刷新页面后，我才能看到任务的实际状态。似乎 cb 在 dataSource.columns 的声明阶段使用了初始值。

提前致谢！

【参考方案1】：

嗯.. dataSource.sync() 附加到“tbody.on change”例程中。这解决了问题。现在一切正常。 0_o。代码 sn-p 已编辑。而且仍然不知道这种奇怪行为的原因是什么。