javascript - Kendo UI 移动 ListView 示例不适用于我的代码

Question

背景:在一些帮助 (@korchev) 的帮助下，我能够弄清楚如何使用 JSONP 将数据绑定(bind)到模板。 (参见this和this question)。但是，我希望能够使数据显示在 kendo UI Mobile List View 中，如 the Kendo Docs 中所述。 .

不幸的是，移动 ListView example ，使用 html 中编码的数据数组，这与 jsonp 不同。

另外，我注意到官方mobile list-view example忽略这一点:<script type="text/x-kendo-template" id="template"> 。这是一个问题，因为我的 code依赖于该实现。

摘要:我是 kendo UI 移动框架的新手，我不明白如何使用现有代码生成移动 ListView 。有时我发现文档令人困惑，我希望有人能提供帮助。

我的代码:

<div id="products"></div>

<script type="text/x-kendo-template" id="template">
    <div class="product">
        <p>#:title#</p>
        <p>#:content#</p>
        <p>#= author.slug #</p>
    </div>
</script>

   <script>

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

        var dataSource = new kendo.data.DataSource({
            schema: {
                data: function(response) {
                    return [response.post];
                }
            },
            transport: {
                read: {
                    url: "http://www.techhelix.com/?json=get_post&id=1/",
                    dataType: "jsonp"
                }
            },
            requestStart: function() {

                kendo.ui.progress($("#products"), true);
            },
            requestEnd: function() {

               kendo.ui.progress($("#products"), false);
               console.log(JSON.stringify(dataSource, null, 4));

            },
            change: function() {

               $("#products").html(kendo.render(template, this.view()));
            }

        });

        dataSource.read();

    });
</script>

Answer 1

Daniel，我首先会从 Kendo Mobile List View 示例开始并使其正常工作。 一旦成功，您可以执行以下操作来绑定(bind)到您的数据源和模板。

function mobileListViewDataBindInitGrouped() {

    ...Code for getting your dataSource here...

    $("#products").kendoMobileListView({
        dataSource: dataSource,
        template: kendo.template($("#template").html()),
        fixedHeaders: true
    });
}