1

我刚开始使用 Kendo mobile（到目前为止印象深刻 - 来自 JQM）。我正在尝试将邮政编码传递给返回一些 json（该区域附近的房屋）的 url，然后使用 Datasource 将其附加到列表视图中。但是，它在我刚刚得到的控制台中失败了：

Error [object Object]

这是我的代码：**更新**

var app = new kendo.mobile.Application(document.body, 
{
    transition:'slide'
});

function onBodyLoad() {
    //document.addEventListener("deviceready", onDeviceReady, false);
    // Use the following for testing in the browser
    getProperties(onResult);
}


function getProperties(callback) {

    var template = kendo.template($("#propertiesListViewTemplate").html());

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {

                url: 'http://www.someurl.me/getproperties.php?postcode=hx59ay',
                dataType: "jsonp"
            }
        },

        schema: {
            data: "listing" //??? Not sure what this should be???
        },


        error: function(e) {
            console.log("Error " + e);
        },
        change: function() {
            $("#propertyResultListView").html(kendo.render(template, this.view()));
            console.log(this.view());
        }
    });
    dataSource.read();
    $("#propertyResultListView").kendoMobileListView({dataSource:dataSource,template: $("#propertiesListViewTemplate").html()});

}

function onResult(resultData) {
    console.log("Results " + listing);
    $("#propertyResultListView").kendoMobileListView({dataSource: kendo.data.DataSource.create({data:resultData}),
        template: $("#propertiesListViewTemplate").html()});
}

我确信这取决于数据源的模式部分，但我不知道它应该是什么（文档并没有真正帮助）。

返回的 JSON 是：

{"country":"England","result_count":510,"longitude":-1.826866,"area_name":"Caldercroft, Elland HX5","listing":[{"image_caption":"Main Image","status":"for_sale","num_floors":"0","listing_status":"sale","num_bedrooms":"2","agent_name":"Daniel & Hirst","latitude":53.688934,"agent_address":"110 Commercial Street","num_recepts":"0","property_type":"Detached","country":"England","longitude":-1.843375,"first_published_date":"2012-10-11 19:05:42","displayable_address":"Elland HX5","street_name":"EXLEY LANE","num_bathrooms":"0","thumbnail_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_80_60.jpg","description":"Comments","post_town":"Elland","details_url":"http://www.zoopla.co.uk/for-sale/details/26491359","agent_logo":"http://static.zoopla.co.uk/zoopla_static_agent_logo_(120721).png","price_change":[{"date":"2012-10-11 16:45:02","price":"37500"}],"short_description":"We are pleased to offer ...","agent_phone":"01484 954009","outcode":"HX5","image_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_354_255.jpg","last_published_date":"2012-11-21 17:31:46","county":"West Yorkshire","price":"37500","listing_id":"26491359"}

有人能指出我正确的方向吗？整个数据源架构让我感到困惑。如果它有助于描述我在 JQM 中尝试做的事情，我会做类似的事情

   $.getJSON(serviceURL + 'getproperties.php?postcode=' + postcode + '&minimum_beds=' + minimumBeds + '&minimum_price=' + minimumPrice + '&maximum_price=' + maximumPrice , function(data) {

    $('#propertyList li').remove();

    // Loop through json data and append to table
    listings = data.listing;
    $.each(listings, function(index, property) {

        console.log(property.image_url);
        console.log(property.price);

        $('#propertyList').append('<li><a href="propertydetails.html?id=' + property.listing_id + '">' +
                '<img src="' + property.thumbnail_url + '"/>' +
                '<h6>' + property.property_type + '</h6>' +
                '<p>' + property.displayable_address + '</p>' +
                '<p><strong>&pound;' + property.price + '</strong></p>');

        $('#propertyList').listview('refresh');
    });

});

模板

<!-- Template for Property results, need to change below fields -->
<script type="text/x-kendo-template" id="propertiesListViewTemplate">
    <h4>${property_type}</h4>
    <p>${street_name}</p>
</script>

* 更新 - 为 Pechka 答案更新代码 **

我现在已经根据您提到的链接更改了我的服务以返回 jsonp（带有回调）。我现在可以在开发人员工具网络选项卡中看到 jsonp -

jQuery17106739131917711347_1354193012656({"country":"England","re​​sult_count":179,"longitude":-1.83261282209016,"area_name":"Elland","listing":[{"image_caption":"","re​​ntal_prices":{ "per_week":75,"accurate":"per_month","per_month":"325"},"status":"to_rent","num_floors":"0","listing_status":"rent","num_bedrooms" :"1","agent_name":"Boococks","纬度":53.68668 ...

不过，我的模板中没有填充任何内容，因此没有创建列表视图（我意识到这可能是由于我对剑道的陌生）。你能看到我哪里出错了吗，与 JQM 相比，这似乎非常棘手......再次感谢您的帮助。

4

3 回答 3

1

我建议您将服务配置为返回jsonp (jsonwithpadding)。

您可以在此演示中看到绑定到 jsonp 的数据源。使用浏览器开发工具的网络选项卡，查看格式的差异。

于 2012-11-28T22:56:39.223 回答
1

好的，我只是想简化这件事，看看错误发生在哪里。
因此，您使用 parameterMap 和 Model 定义 DataSource：

var dataModel = new kendo.data.Model.define({
    id: 'listing_id' //specifies a unique key, every other key is mapped automatically
});
var dataSource = new kendo.data.DataSource({
    transport: {
        parameterMap:function (_data, _operation) {
            if (_operation == 'read') {
                return {
                    postcode: 'bd11db' //sending parameters via parameterMap
                };

            }
        },
        read: {
            url: 'http://www.someurl.me/getproperties.php',
            dataType: "jsonp"
        }
    },

    schema: {
        //data: "ResultSet.Result" //data specifies which "node" to use for the actually returned data, since you want the complete object you dont need to specify this
        model: dataModel //using the specified model
    },


    error: function(e) {
        console.log("Error " + e);
    },
    change: function() {
        $("#propertyResultListView").html(kendo.render(template, this.view()));
        console.log(this.view());
    }
});
dataSource.read();

抱歉，乍一看，我并没有真正看透所有这些回调，但是这个数据源至少应该返回（或记录）您从服务器获得的 JSON

可能无法完全解决您的问题，但可能是对正确方向的提示；）随意评论不清楚或（希望不是）错误的事情

祝你好运 ：）

于 2012-11-28T10:21:54.833 回答
0

尝试这个：

将您的 jsonp 回复包装在类似“results”的 var 中，使其看起来像这样：

jQuery1820051476528169587255_1366217103715({"results":[{"id":"3","entry_stamp":"November 30, -0001 12:00 am","comments":null}]})

指定包装变量：

schema: {
        data: "results" //the portion of your jsonp that you want
    }

调用模板：

$("#propertyResultListView").kendoMobileListView({
   dataSource:dataSource,
   template: $("#propertiesListViewTemplate").html()});

您不需要调用 dataSource.read(); 因为对模板的调用会自动执行此操作。在下面尝试这个作为一个完整的代码视图（我删除了一些可能导致问题的其他项目 - 一旦你让这个简单的版本工作，你将需要替换它们：

            var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: 'http://www.someurl.me/getproperties.php?postcode=hx59ay',
                    dataType: "jsonp"
                }
            },
            schema: {
                data: "results" //your reply data
            }

        });

        $("#propertyResultListView").kendoMobileListView({
            dataSource:dataSource,
            template: $("#propertiesListViewTemplate").html()

        });
于 2013-04-25T22:46:54.200 回答