1

我是剑道新手，遇到了一个问题。我正在尝试在我的剑道应用程序中添加一些远程 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>
4

1 回答 1

2

有几件事：

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

您可以在列表视图文档中找到更多信息。这里还有一些可能有帮助的演示：http ://demos.kendoui.c​​om/mobile/listview/databinding.html

于 2012-12-03T07:07:59.910 回答