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

コードから2つのことに気づきました

  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 に答える