Kendo UI Web包含數(shù)百個(gè)創(chuàng)建HTML5 web app的必備元素，包括UI組件、數(shù)據(jù)源、驗(yàn)證、一個(gè)MVVM框架、主題、模板等。

     在前面的文章《HTML5 Web app開發(fā)工具Kendo UI Web教程：創(chuàng)建自定義組件（二）》中，對(duì)在Kendo UI Web中如何創(chuàng)建自定義組件作出了一些基礎(chǔ)講解，下面將繼續(xù)前面的內(nèi)容。

使用一個(gè)數(shù)據(jù)源

     現(xiàn)在如果想要實(shí)現(xiàn)一個(gè)數(shù)據(jù)源組件或是MVVM aware模式，需要再執(zhí)行一些其他的步驟。 在下面將會(huì)創(chuàng)建一個(gè)DataSource aware組件，要使DataSource aware有數(shù)據(jù)源，首先需要在DataSource基礎(chǔ)對(duì)象上使用create convenience方法。

創(chuàng)建或初始化數(shù)據(jù)源：

that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

     這一行代碼主要是為你的組件數(shù)據(jù)源提供了比較靈活的方式，這個(gè)樣子你就不用創(chuàng)建一個(gè)新的數(shù)據(jù)源來綁定到組件上。

數(shù)據(jù)源作為數(shù)組：

$("#div").kendoRepeater({
    dataSource: ["Item 1", "Item 2", "Item 3"]
});

     如果你傳遞一個(gè)簡(jiǎn)單的數(shù)組， kendo.data.DataSource.create方法將會(huì)為你創(chuàng)建一個(gè)新的基于數(shù)組數(shù)據(jù)的DataSource，并返回到that.dataSource。你也可以通過指定它內(nèi)嵌的配置值來新建一個(gè)datasource。

將數(shù)據(jù)源作為配置對(duì)象：

$("#div").kendoRepeater({
    dataSource: {
        transport: {
            read: {
                url: "//mydomain/customers"
            }
        }
    }
});

     這里正在設(shè)置數(shù)據(jù)源的配置，但是并沒有創(chuàng)建一個(gè)實(shí)例。這個(gè)kendo.data.DataSource.create(that.options.dataSource)將會(huì)獲得這個(gè)配置對(duì)象，并用指定的配置返回一個(gè)新的DataSource實(shí)例。現(xiàn)在已經(jīng)提供了相同的靈活性，在我們自己的組件中盡可能多的方式對(duì)repeater組件指定DataSource。

Handling Events：

     接下來需要做的就是綁定到DataSource change事件并處理它。在這里你將會(huì)基于從DataSource讀取的數(shù)據(jù)改變你的DOM。通常可以用一個(gè)刷新的方法。一般都會(huì)公用這個(gè)刷新的方法，主要由于在初始化后，你和其他人可能會(huì)在組件或某個(gè)節(jié)點(diǎn)上調(diào)用這個(gè)高性能。

綁定到Change Event：

// bind to the change event to refresh the widget
that.dataSource.bind("change", function() {
    that.refresh();
});

有Change Event的組件：

(function($) {

    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        CHANGE = "change";

    var Repeater = kendo.ui.Widget.extend({
        init: function(element, options) {
            var that = this;
            kendo.ui.Widget.fn.init.call(that, element, options);
            // initialize or create dataSource
            that._dataSource();
        },
        options: {
            name: "Repeater"
        },
        _dataSource: function() {
            var that = this;
            // returns the datasource OR creates one if using array or configuration
            that.dataSource = kendo.data.DataSource.create(that.option.dataSource);

            // bind to the change event to refresh the widget
            that.dataSource.bind(CHANGE, function() {
                that.refresh();
            });
        }
    });

    kendo.ui.plugin(Repeater);

})(jQuery);

     現(xiàn)在需要向_dataSource方法添加一些東西，如果需要的話將會(huì)從DataSource中提取。通過檢查that.options的自動(dòng)綁定配置值可以實(shí)現(xiàn)。接下來是調(diào)用that.dataSource.fetch()，需要注意的是，這個(gè)fetch和read是不同的，如果這個(gè)DataSource還沒有被讀取，fetch會(huì)只會(huì)填充DataSource。如果在組件被初始化之前，在DataSource上read已經(jīng)被調(diào)用了的話，那么DataSource就不會(huì)再次被讀取了。

_dataSource: function() {
    var that = this;

    // returns the datasource OR creates one if using array or configuration
    that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

    // bind to the change event to refresh the widget
    that.dataSource.bind(CHANGE, function() {
        that.refresh();
    });

    // trigger a read on the dataSource if one hasn't happened yet
    if (that.options.autoBind) {
        that.dataSource.fetch();
    }
}

     這個(gè)自動(dòng)綁定配置選項(xiàng)還不存在，現(xiàn)在需要添加它到組件上的選項(xiàng)對(duì)象中，并賦予一個(gè)默認(rèn)的值為true。在默認(rèn)的情況下，Kendo UI中所有的DataBound組件都會(huì)自動(dòng)綁定。

為選項(xiàng)添加AutoBind：

options: {
    name: "Repeater",
    autoBind: true
}

>>>Kendo UI Web下載