Kendo UI移動列表視圖示例不使用我的代碼

Question

背景：通過一些幫助（@korchev），我能夠弄清楚如何使用JSONP將數據綁定到模板。 （見這個和這個問題 ）。 但是，我希望能夠在Kendo Docs中提到的kendo UI Mobile List視圖中顯示數據。

不幸的是，移動列表視圖示例使用html中編碼的數據數組，這與jsonp不同。

另外，我注意到官方的移動列表視圖示例將其排除在外： <script type="text/x-kendo-template" id="template"> 。 這是一個問題，因為我的代碼依賴於該實現。

簡介：我是kendo UI移動框架的新手，我不明白如何使用我現有的代碼來生成移動列表視圖。 有時我發現文檔令人困惑，我希望有人能幫忙。

我的代碼：

<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，我首先開始使用Kendo Mobile List View示例，然后開始工作。 一旦有效，您可以執行以下操作來綁定到您的數據源和模板。

function mobileListViewDataBindInitGrouped() {

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

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

Answer 2

您只需將列表視圖綁定到數據源即可。 這是一個簡單的例子：

<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>

現場直播： http ： //jsbin.com/nisuzapu/1/edit