0

我的问题是如何使用KendoObservable对象创建 JSON 数据的视图模型对象（从 .json 文件解析）？

var viewModel = kendo.observable({
    dtSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "/data/SiteMaster.json",
                dataType: "json"
            }
        },
        schema: {
            model: {
                fields: {
                    siteName: { type: "string" },
                    address: { type: "string" },
                    status: { type: "string" },
                    persons: { type: "string" }
                }
            }
        }
    }),
});

我稍后将 viewmodel 对象绑定到 div 元素 kendo.bind($("div"), viewModel);

dtSource但是，当我尝试在浏览器上的开发人员控制台上进行调试时，我无法从我得到的 JSON 文件中读取内容

我正在阅读的 SiteMaster JSON 文件如下

{ 
     "siteMaster":[ 
      { 
         "siteName" : "SHG",
         "filename" : "site1.json",
         "persons": 1,
         "status": "70%",
         "address": "BergesHill Road",
      },
      {
          "siteName" : "ABC",
          "filename" : "site2.json",
          "persons": 1,
          "status": "67%",
          "address": "BergesHill Road",
      },
      {
          "siteName" : "XYZ",
          "filename" : "site3.json",
          "persons": 1,
          "status": "80%",
          "address": "BergesHill Road",
      },
      {
          "siteName" : "Scots",
          "filename" : "site4.json",
          "persons": 1,
          "status": "80%",
          "address": "BergesHill Road",
      }]
}
4

1 回答 1

0

我从代码中注意到两件事

  1. 您的JSON仍由“siteMaster”包裹，它应该类似于 [{},{},{}] 而您的是 {"siteMaster":[{},{},{}]} 或者您可以添加数据：数据源上的模型后的“siteMaster” （看看我的例子）
  2. 人应该是数字
  3. 为什么没有id（现在没关系）？但你不能使用 datasource.get() 没有它

这是实现我的发现并且确实有效的工作示例 

<!DOCTYPE html>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
  <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.uniform.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.uniform.min.css" />

  <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example">
    <div id="grid"></div>
    <div id="test"></div>
    <script>
      $(document).ready(function() {
        var json = {
          "siteMaster": [{
            "siteName": "SHG",
            "filename": "site1.json",
            "persons": 1,
            "status": "70%",
            "address": "BergesHill Road",
          }, {
            "siteName": "ABC",
            "filename": "site2.json",
            "persons": 1,
            "status": "67%",
            "address": "BergesHill Road",
          }, {
            "siteName": "XYZ",
            "filename": "site3.json",
            "persons": 1,
            "status": "80%",
            "address": "BergesHill Road",
          }, {
            "siteName": "Scots",
            "filename": "site4.json",
            "persons": 1,
            "status": "80%",
            "address": "BergesHill Road",
          }]
        }

        var viewModel = kendo.observable({
          dtSource: new kendo.data.DataSource({
            data: json,
            schema: {
              model: {
                fields: {
                  siteName: {
                    type: "string"
                  },
                  address: {
                    type: "string"
                  },
                  status: {
                    type: "string"
                  },
                  persons: {
                    type: "number"
                  }
                }
              },
              data: "siteMaster",
            }
          }),
        });

        $("#grid").kendoGrid({
          dataSource: viewModel.dtSource,
          height: 550,
          columns: [{
            field: "siteName",
            title: "Site Name"
          }, {
            field: "address",
            title: "Address"
          }, {
            field: "status",
            title: "Status"
          }, {
            field: "persons",
            title: "Persons"
          }]
        });

        kendo.bind($("#grid"), viewModel);
      });
    </script>
  </div>


</body>

</html>

于 2016-03-28T07:58:30.183 回答