效果如下,点击后左侧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的参数也将产生变化,由此我们可以完成修改数据源绑定的问题。