jquery - 将 JSON 解释为 Kendo UI Mobile Listview

Question

我正在尝试将我的 JSON 数据转换为 Kendo UI Mobile Listview。我的 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"}]

这个 JS fiddle使用与我的应用程序相同的 html css 和 javascript 文件。

我的问题是，我需要在我的传输和读取方法中添加什么才能正确解释数据。

Answer 1

你的剑道代码很好。只能有2个问题：

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. 您的 DataSource 已在函数“dataInit”中初始化，该函数未在代码中的任何位置显示。并且 listview 在视图的 data-init 事件中被初始化。所以我假设列表在数据源之前初始化并导致数据不被绑定。解决此问题的方法是，您可以将 DataSource 保留在 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'
    });
   }