Question

我正在创建一个新的kendo Mobile应用程序，我正在尝试将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>

Answer 1

只是一些事情，你非常接近。在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

KendoUi移动数据绑定与wordpress

1 个答案: