Интерпретация JSON в Kendo UI Mobile ListView

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

Эта скрипта JS использует тот же 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, которая не отображается нигде в коде. И просмотр списка инициализируется в событии 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'
    });
   }