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

我定义了一个 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" }
        }}
    },
  });

First :我调用以下代码。它将数据正确添加到页面列表视图和本地存储中。

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

datasourceAppList.sync();

Second:我调用以下代码

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

datasourceAppList.sync();

问题：

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

我究竟做错了什么？

---仍然存在一个问题。尽管 localStorage 是正确的，但列表视图填充错误。

第一条记录添加：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>

这实际上是一个综合问题：

You schema定义是：

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

It says extappId: "ID"... 这是什么？你想说吗extappId is the 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) 已定义且不为 null，因此 KendoUI 认为已保存。

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

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/ http://jsfiddle.net/OnaBai/n7sNd/3/