kendo-ui - Kendo Ui 数据源添加功能无法正常工作

Question

我定义了一个 Kendo 数据源，如下所示。它在 ListView 中填充值。

 var datasourceAppList = new kendo.data.DataSource({
    transport: {
      create: function(options){
        //alert(options.data.desc);
        alert(options.data.desc);
        var localData = JSON.parse(localStorage.getItem("LsAppList"));
        localData.push(options.data);
        localStorage.setItem("LsAppList", JSON.stringify(localData)); //localStorage["LsAppList"] = JSON.stringify(localData); 
        options.success(localData);
      },
      read: function(options){ 
          var localData = JSON.parse(localStorage["LsAppList"]); 
          options.success(localData);
      },
      update: function(options){
        var localData = JSON.parse(localStorage["LsAppList"]); 
        for(var i=0; i<localData.length; i++){
          if(localData[i].extappId == options.data.extappId){
            localData[i].desc = options.data.desc;
            localData[i].deviceNo = options.data.deviceNo;
            localData[i].validationKey = options.data.validationKey;
          } 
        }
        localStorage["grid_data"] = JSON.stringify(localData); 
        options.success(localData);
      },
      destroy: function(options){ 
        var localData = JSON.parse(localStorage["LsAppList"]); 
        localData.remove(options.data.ID);
        localStorage["LsAppList"] = JSON.stringify(localData); 
        options.success(localData);
      },
    },
        schema: {
      model: {
        extappId: "ID",
        fields: {
          extappId: { type: "number" },
          desc: { type: "string" },
          deviceNo: { type: "number" },
          validationKey: { type: "string" }
        }}
    },
  });

首先: 我调用以下代码。它将数据正确地添加到页面 ListView 和本地存储中。

datasourceAppList.add({ extappId: "9905", desc: "test", deviceNo: "5", validationKey: "CACACACA"});

datasourceAppList.sync();

第二:我调用下面的代码

datasourceAppList.add({ extappId: "9908", desc: "harvest", deviceNo: "7", validationKey: "ppppppp"});

datasourceAppList.sync();

问题:

1. 页面两次显示第一条记录。
2. localstorage有2次第一条记录和1次第二条记录。

我做错了什么？

---还有一个问题。虽然 localStorage 是正确的，但 listview 填充错误。

第一个记录添加:ListView 是正确的第二条记录添加:ListView 是正确的第三条记录添加:前两行显示第一条记录，最后一行显示最后一条记录。

我的 HTML 代码是

<div id="applications" data-role="view"  data-title="Defined Applications" data-layout="default" data-model="appdetail">
    <ul id="applist" data-role="listview" data-style="inset" data-source="datasourceAppList" data-template="tmp" data-click="listViewClick" data-auto-bind="true"></ul>


    <p align="center">
        <a  style="width: 30%" data-role="button" data-rel="modalview" data-click="showModalViewAdd" id="buttonAddApplication" data-icon="ecg-plus">Add</a>
        <a  style="width: 30%" data-role="button" data-rel="modalview" data-click="refreshApplicationList" id="buttonRefreshApplication" data-icon="refresh">Refresh</a>
    </p>

</div>

<script id="tmp" type="text/x-kendo-template">
    <a id = "#: extappId #">#: desc # </a>

</script>

Answer 1

其实是一个组合题:

你的schema定义是:

schema: {
    model: {
        extappId: "ID",
        fields: {
            extappId: { type: "number" },
            desc: { type: "string" },
            deviceNo: { type: "number" },
            validationKey: { type: "string" }
        }
    }
 }

上面写着 extappId: "ID"...这是什么？你想说 extappId 是那条记录的 id 吗？如果是这样，实际的定义应该是:

schema: {
    model: {
        id: "extappId",
        fields: {
            extappId: { type: "number" },
            desc: { type: "string" },
            deviceNo: { type: "number" },
            validationKey: { type: "string" }
        }
    }
 }

这里发生的事情不是(正确地)定义 id，KendoUI 期望 id 实际上是 id，因为这不是在 create 期间设置，下次您 sync 它会尝试保存它，它等同于:

datasourceAppList.add({ extappId: 9905, desc: "test", deviceNo: 5, validationKey: "CACACACA"});
datasourceAppList.add({ extappId: 9908, desc: "harvest", deviceNo: 7, validationKey: "ppppppp"});
datasourceAppList.sync();

但是如果您尝试这样做，您会发现 create 永远不会被调用。现在发生的是记录的 id(即 extappId)已经定义并且不为空，因此 KendoUI 认为它已经保存。

为了解决第二个问题，我的建议是将 schema 定义为:

schema: {
    model: {
        id: "ID",
        fields: {
            extappId: { type: "number" },
            desc: { type: "string" },
            deviceNo: { type: "number" },
            validationKey: { type: "string" }
        }
    }
 }

现在，id 是一个名为 ID 的字段，这个 ID 应该在 transport.create 上创建(在调用 add 方法之前不能设置)。

然后，你在 create 中设置它，你可以使用:

create: function(options){
    // Set `ID` to kendo.guid
    options.data.ID = kendo.guid();
    alert(options.data.desc);
    var localData = JSON.parse(localStorage.getItem("LsAppList"));
    localData.push(options.data);
    localStorage.setItem("LsAppList", JSON.stringify(localData)); //localStorage["LsAppList"] = JSON.stringify(localData); 
    options.success(localData);
},

在这里查看:http://jsfiddle.net/OnaBai/n7sNd/3/