0

我正在尝试将我的 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 文件。

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

4

1 回答 1

0

你的剑道代码很好。只能有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'
 });
}
于 2013-04-24T15:13:13.280 回答