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

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