KendoUI Mobile 如何获取远程数据并绑定

来源：互联网发布：阿猫阿狗知乎编辑：程序博客网时间：2024/06/07 23:21

样子丑了点。。。。。

1.首先引入javascript文件 kendo.all.min.js,有了它，我们不需要再引入特定的kendoUI了

2.然后仿照kendoUI文件夹里datasourc 的例子定义一个数据源（dataSource）

代码示例：

  var ds = new kendo.data.DataSource({transport: {read: {// the remote service urlurl: "http://localhost:3458/DataService/GetMetricCharts",// JSONP is required for cross-domain AJAXdataType: "jsonp",// additional parameters sent to the remote servicedata: {aggregationType: '60-avg',timeRange:'sel',metricid:'34',stDate:'2011-10-29T16:00:00.000Z',enDate:'2012-02-08T02:25:55.196Z'}}},// describe the result formatschema: {// the data which the data source will be bound to is in the "results" fielddata: ""}         });

3.定义模板：

  <script id="customListViewTemplate" type="text/x-kendo-template">        <h3 class="item-title">#= m1 #</h3>        <p class="item-info">#= DateTime #</p>    </script>

4.jquery构造函数的时候渲染就可以了,lz做的是list控件。

  function mobileListViewTemplatesInit() {        $("#custom-listview").kendoMobileListView({            dataSource: ds,            template: $("#customListViewTemplate").html()           // headerTemplate: "<h2>Letter ${m1}</h2>"        });    }

5.最后附html及样式代码：

   <link href="lib/shared/styles/examples.css" rel="stylesheet"/>        <link href="lib/shared/styles/examples-offline.css" rel="stylesheet"/>        <link href="lib/source/styles/kendo.common.css" rel="stylesheet"/>        <link href="lib/source/styles/kendo.default.css" rel="stylesheet"/>        <script src="lib/js/jquery.min.js"></script>        <script src="lib/js/kendo.all.min.js"></script>        <link href="lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />

    <a href="../index.html">Back</a>    <div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView">    <div class="head"> </div>    <ul id="custom-listview"></ul></div>

如此我们便可以做出一个简单的list界面，其中数据由wcf传出，在客户端得到。