Kendo UI - 将远程 jsonp 附加到模板答案

【问题标题】：Kendo UI - Append remote jsonp to templateKendo UI - 将远程 jsonp 附加到模板
【发布时间】：2012-12-03 15:07:59
【问题描述】：

我是剑道新手，遇到了一个问题。我正在尝试在我的剑道应用程序中添加一些远程 json，然后将其添加到模板/列表视图中。我可以在 chrome 开发工具网络选项卡和 console.log(this.view()); 中看到响应在我的数据源更改方法中，我在控制台中获得了某种剑道代码，其中包含我的结果

但我似乎无法将结果添加到我的模板中？这是我的代码，希望你能指出我正确的方向，因为我喜欢剑道，但需要解决这个问题才能继续前进……或者回到 jquery mobile。提前致谢。

<body onload="onBodyLoad()">

<!-- Home page -->
<div data-role="view" data-layout="default" id="home">
    <p>Home</p>
</div>

<div data-role="view" data-layout="default" id="search">
    <div class="form">
        <button id="getProperties" name="getProperties" value="Get Properties" data-role="button">Get Properies</button>
    </div>
    <ul id="resultListView"/>
</div>

<!-- Settings -->
<div data-role="view" data-layout="default" id="settings">
    <p>Some settings</p>
</div>

<!-- Layout -->
<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">My app</div>
    </header>
    <!--View content will render here-->
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="home" href="#home">Home</a>
            <a data-icon="search" href="#search">Search</a>
            <a data-icon="organize" href="#calculator">Calculator</a>
            <a data-icon="settings" href="#settings">Settings</a>       
        </div> 
    </footer>
</section>

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

<!-- 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>

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

function onBodyLoad() {
    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"
        },


        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); // This isnt getting logged in console...
    $("#propertyResultListView").kendoMobileListView({dataSource: kendo.data.DataSource.create({data:resultData}),
        template: $("#propertiesListViewTemplate").html()});
}

</script>

【问题讨论】：

您介意展示检索到的 JSON 的样子吗？据我所见，它应该是一个 JSON 对象，其中包含一个名为列表的元素。那是对的吗？列表是什么样的？

标签： kendo-ui

【解决方案1】：

有几点：

您没有 id="propertyResultListView" 的元素，但您使用它来创建列表视图。
如果您打算将数据源与 Kendo 小部件一起使用，您无需执行任何其他操作，只需指定它即可。例如，不需要手动处理更改事件和渲染模板 - 移动列表视图会自动完成。

您可以在list view documentation 中找到更多信息。这里还有一些演示可能会有所帮助：http://demos.kendoui.com/mobile/listview/databinding.html

【讨论】：

您好，感谢您的回答 - 我已经更正了丢失的 id（这就是您从示例中复制广告粘贴的结果！），我现在有一个列表视图。我还删除了更改事件。当您提到渲染模板时，您指的是代码的哪一部分？
我的意思是数据源的更改事件。列表视图将自动呈现其模板（通过数据模板设置）。