解釋JSON到Kendo UI移動列表視圖

Question

我試圖將我的JSON數據轉換爲Kendo UI移動列表視圖。我的PHP腳本輸出這樣的數據：

[{"eventID":"1","name":"test","time":"12:00:00","category":"####","subcategory":"####","description":"Event for testing purposes","locationID":"1","picturePath":"http:\/\/####\/~z3370257\/images\/1.jpg"},{"eventID":"2","name":"test2","time":"13:00:00","category":"####","subcategory":"SEIT","description":"Event for testing purposes2","locationID":"1","picturePath":"http:\/\/####\/~z3370257\/images\/1.jpg"}] 

This JS fiddle使用相同的HTML CSS和JavaScript文件，我的應用程序一樣。

我的問題是，我需要在我的傳輸&中讀取哪些方法才能正確解釋數據。

Answer 1

你的劍道碼很好。只能有兩個問題：

1. 服務返回的數據不正確JSON。應該像這樣編碼：

      [{ 
          "category": "123", 
          "description": "Event for testing purposes", 
          "eventID": "1", 
          "locationID": "1", 
          "name": "Kendo", 
          "picturePath": "https://si0.twimg.com/profile_images/1514396238/KendoUI-Figure.png", 
          "subcategory": "SEIT", 
          "time": "12:00:00" 
         } , 
   
         { 
          "category": "123", 
          "description": "Event for testing purposes", 
          "eventID": "1", 
          "locationID": "1", 
          "name": "jQuery", 
          "picturePath": "http://dochub.io/images/jquery_logo.png", 
          "subcategory": "SEIT", 
          "time": "12:00:00" 
         }] 
   

2. 您的數據源是insde未在代碼的任何地方顯示的功能「dataInit」初始化。 listview在視圖的data-init事件中被初始化。所以我假設列表在數據源之前被初始化並導致數據不被綁定。 定爲這是你可以保持您的數據源的dataInit功能之外如本撥弄使用你的代碼，你所希望的方式其中工程：http://jsfiddle.net/whizkid747/MPzVu/

   var app = new kendo.mobile.Application(document.body);   
   var dataSource = new kendo.data.DataSource({ 
   
       transport: { 
        read: { 
         //using jsfiddle echo service to simulate JSON endpoint 
         url: "/echo/json/", 
         dataType: "json", 
         type: "POST", 
         data: { 
          // /echo/json/ echoes the JSON which you pass as an argument 
          json: JSON.stringify([ 
           { 
            "category": "123", 
            "description": "Event for testing purposes", 
            "eventID": "1", 
            "locationID": "1", 
            "name": "Kendo", 
            "picturePath": "https://si0.twimg.com/profile_images/1514396238/KendoUI-Figure.png", 
            "subcategory": "SEIT", 
            "time": "12:00:00" 
           } , 
           { 
            "category": "123", 
            "description": "Event for testing purposes", 
            "eventID": "1", 
            "locationID": "1", 
            "name": "jQuery", 
            "picturePath": "http://dochub.io/images/jquery_logo.png", 
            "subcategory": "SEIT", 
            "time": "12:00:00" 
           } 
          ]) 
         } 
        } 
       } 
   }); 
   
   function loadEventNames(){   
       $("#eventfeed").kendoMobileListView({ 
       dataSource: dataSource, 
       template: $("#eventNameTemplate").html(), 
       style:'inset' 
   }); 
   }