Kendo UI Mobile List View example not working with

Question

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 data displayed in a kendo UI Mobile List view as mentioned in the Kendo Docs.

Unfortunately, the mobile-list view example, uses arrays of data coded in the html which is unlike jsonp.

Also, I notice that the official mobile list-view example leaves this out : <script type="text/x-kendo-template" id="template">. And that is a problem because my code relies on that implementation.

Summary: I am new to the kendo UI mobile framework, and I don't understand how to use my existing code to yield a mobile list view. Sometimes I find the documentation confusing, and I would please like somebody to assist.

My code:

<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, 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
    });
}

Answer 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