Kendo ui KendoUI/Mobile-获取JSONP并附加到listview

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

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');
    });

});

$.getJSON（serviceURL+'getproperties.php？邮政编码='+邮政编码+'&最小床数='+最小床数+'&最小价格='+最小价格+'&最大价格='+最大价格，函数（数据）{
$（“#propertyList li”）.remove（）；
//循环json数据并附加到表中
listings=data.listing；
$。每个（列表、函数（索引、属性）{
console.log（property.image\uURL）；
console.log（property.price）；
$（'#propertyList'）。追加（'
'+
'' +
''+property.property_type+''的+
“”+property.displaybable_address+”
'+
“£；”+property.price+”）；
$（'#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>

${property\u type}
${街道名称}

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

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

jQuery17106739131917711347_1354193012656（{“国家”：“英格兰”，“结果计数”：179，“经度”：-1.83261282209016，“区域名称”：“埃兰”，“列表”：[{“图像标题”：“，”租金价格“：{“每周”：75，”准确“：”每月“，”每月“：”325“，”状态“：”租金“，”楼层数“：”0“，”列表状态“：”租金“，”卧室数“：”1“，”代理人姓名“：”books”，“纬度”：53.68668

---

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

好的，我只是尝试简化这件事，看看错误发生在哪里。
因此，您可以使用parameterMap和模型定义数据源：

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

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

祝您好运：）

我建议您将服务配置为返回（jsonwithpadding）

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

尝试以下操作：

将jsonp回复封装在类似“results”的变量中，使其看起来如下所示：

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()

        });

---

为什么在您的服务返回json时使用数据类型jsonp？@Pechka是因为跨域ajax。这不正确吗？那么您的服务应该返回一个jsonp结果。请检查这一点，因为您可以看到调用了一个特殊的回调函数（它不仅仅是您期望的常规json:）您好，谢谢您的回答，我已经使用了您的代码，错误已经消失，但我没有在控制台中记录任何内容或添加到列表视图？？有什么想法，我应该发布更多代码吗？提前感谢DS准备就绪时触发更改事件（有数据可用）如果console.log不存在，则表示DS从未准备就绪或没有数据。请尝试记录与此无关的内容，如“DS触发更改事件”。如果未触发此事件，DSI出现一些问题，只是看到street_名称嵌套在

列表中

，因此您可以直接调用

${listing.street_name}

或将

'listing'

定义为模式中的

数据

属性，就像您之前所做的那样。我不知道您是否可以/必须指定

listing。listing\u id

在模型中Hi，我已经接受了您的建议并更新了我的服务以生成jsonp（根据您链接的文章进行回调）。我仍然没有得到任何运气，但我似乎已经将jsonp返回到我的开发工具网络选项卡-你能看看我上面更新的代码吗？谢谢你的帮助，到目前为止我对剑道非常失望，希望你能让我重回正轨！谢谢不确定还有什么可能是错误的。在co中有JavaScript错误吗NSLE？如果有问题行是什么？控制台中没有错误，也没有任何内容。在chrome dev tools的“网络”选项卡中，我可以看到类似于json但嵌套在回调中的响应，但列表视图没有创建，屏幕上也没有添加任何内容。如果我使用console.log（this.view（））；在datasource change方法下，我在控制台中得到一些奇怪的（可能是kendo）js，其中包含嵌套在其中的web服务的结果-我只是无法让它创建嵌套视图。。。