So erstellen Sie Ansichtsmodell für zugrunde liegende JSON-Daten in KendoUI

Meine Frage ist, ein View-Model-Objekt eines JSON-Daten (geparst aus einer .json-Datei) mit KendoObservable Objekt zu erstellen?So erstellen Sie Ansichtsmodell für zugrunde liegende JSON-Daten in 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" } 
       } 
      } 
     } 
    }), 
});

Ich Bindung des Viewmodel-Objekt des div-Element zu einem späteren Zeitpunkt kendo.bind($("div"), viewModel);

Aber ich bin nicht in der Lage, den Inhalt aus der JSON-Datei zu lesen ich dtSource ist nicht definiert, wenn ich versuche

auf Browser auf Developer Console zu debuggen

Die Site JSON-Datei, die ich lese unter

{ 
    "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", 
     }] 
}

Quelle

2016-03-24 this-Me

bemerkte ich zwei, was aus dem Code

Ihre JSON noch von "Site" verpackt, sollte es wie haben sein [{}, {}, {}] und dein ist { "Site": [{}, {}, {}]} oder Sie könnten Daten hinzufügen: „Site“ nach Modell auf die Datenquelle (werfen Sie einen Blick auf mein Beispiel)
Personen sein Nummer
sollte, warum es keine ID (spielt jetzt keine Rolle)? aber man kann datasource.get() nutzen, ohne es

Hier ist beispielsweise zu arbeiten, wo meine Erkenntnis umzusetzen und es funktioniert

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

Quelle

2016-03-28 07:58:30

So erstellen Sie Ansichtsmodell für zugrunde liegende JSON-Daten in KendoUI

Antwort

Verwandte Themen