效果如下,点击后左侧Navigator Bar刷新
<div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView" data-transition="slide"> <ul style="float: left; width: 30%" id="custom-listview"></ul>
<input id="metricId" type="hidden" value="34"/> <input id="metricUrl" type="hidden" value="http://localhost:3458/EmiteDataService/Nodes"/> <input id="metricStatus" type="hidden" value="0"/>
模板函数
<script id="customListViewTemplate" type="text/x-kendo-template"> <div> <h3 class="item-title">#= MetricName #</h3> <p class="item-info">#= HostName #</p> <a data-role="button" onclick="GetMetricNodes('#= NodeId #')">View</a> <a data-role="button" class="details-link" onclick="GetChartById('#= MetricId #')">Next</a> </div> </script>
然后是初始化时的载入函数(mobileListViewTemplatesInit)
<script> var metricNode = new kendo.data.DataSource({ transport: { read: { // the remote service url url:"http://localhost:3458/EmiteDataService/Nodes",// JSONP is required for cross-domain AJAX dataType: "jsonp",// additional parameters sent to the remote service data: { userName:function(){ return 'admin'; },userDomain:function(){ return 'admin'; },status:function(){ return $('#metricStatus').val() } } } },// describe the result format schema: { // the data which the data source will be bound to is in the "results" field data: "" },change: function() { // subscribe to the CHANGE event of the data source //alert($('#metricId').val()); /*$("#tweets").html(kendo.render(template,this.view()));*/ } }); function mobileListViewTemplatesInit() { $("#custom-listview").kendoMobileListView({ dataSource:metricNode,template: $("#customListViewTemplate").html() }); } </script>
<script type="text/javascript"> function GetChartById(index){ //this.element.prop("id") $('#metricId').attr("value",index); dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: "http://localhost:3458/EmiteDataService/GetMetricCharts",// additional parameters sent to the remote service data: { aggregationType:function(){ return $("#aggregationType").val(); },timeRange:function(){ return $("#timeRange").val(); },metricid:function(){ return $("#metricId").val(); },stDate:'2011-10-29T16:00:00.000Z',enDate:function(){ return edTime; } } } },change: function() { // subscribe to the CHANGE event of the data source //alert("fffdds"); /*$("#tweets").html(kendo.render(template,this.view()));*/ } }); createChart(); } function GetMetricNodes(index) { $('#metricId').attr("value",index); metricNode = new kendo.data.DataSource({ transport: { read: { // the remote service url url:"http://localhost:3458/EmiteDataService/ChildNodes",parentNodeId:function(){ return $('#metricId').val() } } } },this.view()));*/ } }); metricNode.read(); mobileListViewTemplatesInit(); } </script>
其实原理很简单,不过就是定义一个数据源然后绑定到控件上面,触发button点击事件的时候,通过一个隐藏的input,修改其中value的值,指的一提的是,数据源中的参数选择是读取input中value的值,如果input中value的值产生变更,request wcf的参数也将产生变化,由此我们可以完成修改数据源绑定的问题。