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

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 文件中读取内容当我尝试在浏览器

的开发者控制台上调试时，我得到 dtSource is not defined

我正在阅读的 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 仍然被 "siteMaster" 包裹着，它应该像 [{},{},{}] 而你的是 { "siteMaster":[{},{},{}]} 或者您可以在 model 之后添加 data: "siteMaster"在数据源上（看看我的例子）
人数应该是
为什么没有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>

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

How to create view model for underlying JSON data in KendoUI

telerik

mvvm

kendo-ui

kendo-ui-grid