Kendo UI Mobile List View示例不适用于我的代码

问题描述

背景:在一些帮助(@korchev)的帮助下，我得以弄清楚如何使用JSONP将数据绑定到模板. (请参见此和).但是，我希望能够使数据显示在剑道文档.

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.

不幸的是，移动列表视图示例，使用与jsonp不同的html中编码的数据数组.

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

此外，我注意到官方移动列表视图示例忽略此内容:<script type="text/x-kendo-template" id="template">.这是一个问题，因为我的代码依赖于该实现.

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.

摘要:我是kendo UI移动框架的新手，并且我不了解如何使用现有代码生成移动列表视图.有时我觉得文档令人困惑，我希望有人提供帮助.

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>

推荐答案

您只需要将列表视图绑定到数据源即可.这是一个简单的示例:

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>

还可以实时使用: http://jsbin.com/nisuzapu/1/edit

这篇关于Kendo UI Mobile List View示例不适用于我的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！