Question

我的问题是使用 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);

但是，我无法从JSON文件中读取内容当我尝试在浏览器

上的Developer Console上进行调试时，我没有定义dtSource

我正在阅读的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",
      }]
}

Answer 1

我注意到代码中的两件事

您的 JSON 仍然包含在＆＃34; siteMaster＆＃34;中，它应该像[{}，{}，{}]一样，你的是{＆＃34; siteMaster＆＃34;：[{}，{}，{}]}或者您可以添加数据＆＃34; siteMaster＆＃34;在数据源上的模型之后（看看我的例子）
人应该是数字
为什么没有身份证（现在不重要）？但你不能利用datasource.get（）而不能

以下是实施我的发现并确实有效的实例

＆＃13;

<!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>

＆＃13;

如何在KendoUI中为底层JSON数据创建视图模型

1 个答案: