kendoUI如何刷新数据源

效果如下，点击后左侧Navigator Bar刷新

init显示的代码：

<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" οnclick="GetMetricNodes('#= NodeId #')">View</a>
        <a data-role="button" class="details-link" οnclick="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>

点击button后的触发函数：

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

							// JSONP is required for cross-domain AJAX
							dataType: "jsonp",

							// 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;
                                }

							}
						}
					},
					// 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("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",
							// 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';
                                },
								parentNodeId:function(){
                                    return  $('#metricId').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()));*/
                    }
				});

                metricNode.read();
                mobileListViewTemplatesInit();
                

            }


        </script>

其实原理很简单，不过就是定义一个数据源然后绑定到控件上面，触发button点击事件的时候，通过一个隐藏的input，修改其中value的值，指的一提的是，数据源中的参数选择是读取input中value的值，如果input中value的值产生变更，request wcf的参数也将产生变化，由此我们可以完成修改数据源绑定的问题。