Как создать модель представления для лежащих в основе данных JSON в KendoUI

Мой вопрос состоит в том, чтобы создать объект модели представления данных JSON (проанализированный из файла .json) с помощью KendoObservable объект?Как создать модель представления для лежащих в основе данных JSON в KendoUI

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 к элементу сНа в более поздний момент времени kendo.bind($("div"), viewModel);

Однако, я не в состоянии прочитать содержимое из файла JSON я получаю 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", 
     }] 
}

источник

2016-03-24 this-Me

я заметил две вещи из кода

ваш JSON еще обернут "Sitemaster", он должен уже быть как [{}, {}, {}] и у вас { "Sitemaster": [{}, {}, {}]} или вы могли бы добавить данные: "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>

источник

2016-03-28 07:58:30

Как создать модель представления для лежащих в основе данных JSON в KendoUI

ответ

Смежные вопросы