Kendo UI Mobile List View Example Not Working With My Code

Background: With some help (@korchev) I was able to figure out how to use JSONP to bind data to a template. (see this and this question). However, I wanted to be able to make the d

Solution 1:

Daniel, I would first start out with the Kendo Mobile List View example and get that working. Once that works, you can do the following to bind to your datasource and template.

function mobileListViewDataBindInitGrouped() {

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

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

Solution 2:

You just need to bind the list view to your data source. Here is a quick example:

<div data-role="view">
  <ul data-role="listview" 
      data-source="myDataSource" 
      data-template="template"></ul>
  <script type="text/x-kendo-template" id="template">
  <div class="product">
    <p>#:title#</p>
    <p>#=content#</p>
    <p>#= author.slug #</p>
  </div>
 </script>
 </div>
 <script>
 var myDataSource = 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"
    }
  }
});
 var application = new kendo.mobile.Application();
</script>

Also available live: http://jsbin.com/nisuzapu/1/edit