KendoUi Mobile data binding with wordpress

Question

I am creating a new kendo Mobile application and i am trying have been trying to bind Wordpress post to a list view with click to load more functionality. I just cant seems to make it work. Please i need some assistance on this.

<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

Just a couple of things, you are pretty close. In your dataSource, you need to set the dataType of the read object to "jsonp", not the type of the entire data source. Also, since your data comes back in a collection called "posts", you need to define that in the 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));

If you reference the schema.data properly, you don't need the data.posts.title, or data.posts.thumbnail_images, just title and 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>

See fixed jsbin http://jsbin.com/uKAFeMo/2/edit