0

我正在创建一个新的剑道移动应用程序，并且我一直在尝试通过单击将 Wordpress 帖子绑定到列表视图以加载更多功能。我似乎无法让它发挥作用。请我在这方面需要一些帮助。

<div data-role="view" id="home" data-layout="main-layout" data-title="MaskJams" data-init="mobileListViewPressToLoadMore">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </header>

    <ul id="load-more"></ul>
<script type="text/x-kendo-tmpl" id="load-more-template">
    <div class="product">
        <img src="#=data.posts.thumbnail_images.medium#" alt="#:data.posts.title#" class="pullImage"/>
        <h3>#:data.posts.title#</h3>

    </div>
</script>

<script>
    function mobileListViewPressToLoadMore() {
        var dataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    url: "http://www.maskjams.com/api/get_recent_posts/?callback=callback"
                }
            },
            serverPaging: true,            
            pageSize: 20
        });

        $("#load-more").kendoMobileListView({
            dataSource: dataSource,
            template: $("#load-more-template").text(),
            loadMore: true
        });
    }
</script>

</div>
4

1 回答 1

0

只是几件事，你很接近。在您的dataSource中，您需要将读取对象的dataType设置为“jsonp”，而不是整个数据源的类型。此外，由于您的数据返回到一个名为“posts”的集合中，因此您需要在 schema.data 中定义它。

var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://www.maskjams.com/api/get_recent_posts/",
      dataType: "jsonp"
    }
  },
  schema: {
    data: "posts"
  },
  serverPaging: true,            
  pageSize: 20
});

$("#load-more").kendoMobileListView({
  dataSource: dataSource,
  template: $("#load-more-template").text()
});

var app = new kendo.mobile.Application($(document.body));

如果正确引用 schema.data，则不需要 data.posts.title 或 data.posts.thumbnail_images，只需 title 和 thumbnail_images。

<ul id="load-more"></ul>
<script type="text/x-kendo-tmpl" id="load-more-template">
    <div class="product">
        <img src="#=thumbnail_images.medium.url#" alt="#-title#" class="pullImage"/>
        <h3>#=title#</h3>

    </div>
</script>

请参阅固定的 jsbin http://jsbin.com/uKAFeMo/2/edit

于 2013-10-16T14:43:43.823 回答