Question

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

See ScreenShot

但我似乎无法将结果添加到我的模板中？继承我的代码，希望你能指出我正确的方向，因为我喜欢剑道，但需要解决这个问题才能继续前进......或者回到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>

Answer 1

有几件事：

您没有id =“propertyResultListView”的元素，但您使用它来创建列表视图。
如果您要将数据源与Kendo小部件一起使用，则除了指定它之外，您不需要执行任何其他操作。例如，手动处理更改事件并不需要呈现模板 - 移动列表视图将自动执行。

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

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

1 个答案: