Kendo UI Web包含數(shù)百個創(chuàng)建HTML5 web app的必備元素，包括UI組件、數(shù)據(jù)源、驗證、一個MVVM框架、主題、模板等。在前面的2篇文章《HTML5 Web app開發(fā)工具Kendo UI Web教程：創(chuàng)建自定義組件》中，已經(jīng)對在Kendo UI Web中如何創(chuàng)建自定義組件的方法和步驟做了一些的講解，本文將完成所有的內(nèi)容。

模板繪制控件：

    通過Kendo UI的Templates渲染進行HTML輸出，Kendo UI Templates允許你編譯HTML和注入數(shù)據(jù)或表達式到被評估以及作為一個HTML字符串返回的DOM片段的HTML中。在

    Kendo UI中的所有組件都允許指定一種除組件使用的默認模版之外的模版。要指定模版，需要首先添加模版到選擇對象中，并設(shè)置它的值為一個空的字符串，相反其他的配置設(shè)置，我們不會在這里設(shè)置它的默認值。

添加模版到選項：

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

設(shè)置這個模版的默認值：

that.template = kendo.template(that.options.template || "<p><strong>#= data #</strong></p>")

實現(xiàn)一個刷新功能：

    由于綁定到一個change方法，現(xiàn)在需要實現(xiàn)當DataSource改變或者是被直接調(diào)用的時候，這個refresh public函數(shù)會被調(diào)用，這個刷新方法就是我將要mutate DOM的地方。首先需要做的事情就是調(diào)用我們來自DataSource數(shù)據(jù)的that.dataSource.view()，接下來就是使用kendoRender，并隨著DataSource數(shù)據(jù)通過一個模版，這個就是Kendo UI組件mutate DOM的方法。渲染方法應(yīng)用數(shù)據(jù)到數(shù)據(jù)源并返回HTML字符串。

公有Refresh Function：

refresh: function() {
    var that = this,
        view = that.dataSource.view(),
        html = kendo.render(that.template, view);
}
Mutate  DOM Element HTML：
refresh: function() {
    var that = this,
        view = that.dataSource.view(),
        html = kendo.render(that.template, view);

    that.element.html(html);
}

數(shù)據(jù)源控件的完整代碼：

(function() {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,

    CHANGE = "change";

    var Repeater = Widget.extend({
        init: function(element, options) {
            var that = this;

            kendo.ui.Widget.fn.init.call(that, element, options);
            that.template = kendo.template(that.options.template || "<p><strong>#= data #</strong></p>");

            that._dataSource();
        },
        options: {
            name: "Repeater",
            autoBind: true,
            template: ""
        },
        refresh: function() {
            var that = this,
                view = that.dataSource.view(),
                html = kendo.render(that.template, view);

            that.element.html(html);
        },
        _dataSource: function() {
            var that = this;
            // returns the datasource OR creates one if using array or configuration object

            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();
            });

            if (that.options.autoBind) {
                that.dataSource.fetch();
            }
        }
    });

    ui.plugin(Repeater);

})(jQuery);

    下面是一個演示，有兩個組件在這里進行了初始化，第一個是使用一個簡單的陣列作為數(shù)據(jù)源，第二個是使用的遠程端點、模板、并聲明初始化。

var dataSource = new kendo.data.DataSource({
    data: [ "item1", "item2", "item3" ]
});

kendo.bind($("#container"));

$("#repeater").kendoRepeater({
    dataSource: [ "item1", "item2", "item3" ]
});

組件MVVM Aware：

var DATABINDING = "dataBinding",
    DATABOUND = "dataBound",
    CHANGE = "change"    

var Repeater = kendo.ui.Widget.extend({

    init: function(element, options) {
        ...
    },
    options{
        ...
    },

    // events are used by other widgets / developers - API for other purposes
    // these events support MVVM bound items in the template. for loose coupling with MVVM.
    events: [
        // call before mutating DOM.
        // mvvm will traverse DOM, unbind any bound elements or widgets
        DATABINDING,
        // call after mutating DOM
        // traverses DOM and binds ALL THE THINGS
        DATABOUND
    ]
});

項目：

    MVVM將會要我們公有代表著我們組件的每一行或者是每個重復(fù)元素的DOM 片段，我們需要返回使用到的對于MVVM的最外層的元素，在通常情況下是this.element.children。由于每個模版項目呈現(xiàn)的是一個與綁定元素相關(guān)的DOM片段，我們可以通過使它對項目對象不可用，來對MVVM公有它。

示例：

var DATABINDING = "dataBinding",
    DATABOUND = "dataBound",
    CHANGE = "change"    

var Repeater = kendo.ui.Widget.extend({

    init: function(element, options) {
        ...
    },
    options{
        ...
    },

    // events are used by other widgets / developers - API for other purposes
    // these events support MVVM bound items in the template. for loose coupling with MVVM.
    events: [
        // call before mutating DOM.
        // mvvm will traverse DOM, unbind any bound elements or widgets
        DATABINDING,
        // call after mutating DOM
        // traverses DOM and binds ALL THE THINGS
        DATABOUND
    ],

    // mvvm expects an array of dom elements that represent each item of the datasource.
    // should be the outermost element's children
    items: function() {
        return this.element.children();
    }
});

改變數(shù)據(jù)源：

// for supporting changing the datasource via MVVM
setDataSource: function(dataSource) {
    // set the internal datasource equal to the one passed in by MVVM
    this.options.dataSource = dataSource;
    // rebuild the datasource if necessary, or just reassign
    this._dataSource();
}

調(diào)整 _dataSource：

    對于我們用于指定和創(chuàng)建數(shù)據(jù)源的方法現(xiàn)在需要做一些調(diào)整。

_dataSource: function() {

    var that = this;

    // if the DataSource is defined and the _refreshHandler is wired up, unbind because
    // we need to rebuild the DataSource
    if ( that.dataSource && that._refreshHandler ) {
        that.dataSource.unbind(CHANGE, that._refreshHandler);
    }
    else {
        that._refreshHandler = $.proxy(that.refresh, that);
    }

    // returns the datasource OR creates one if using array or configuration object
    that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
    // bind to the change event to refresh the widget
    that.dataSource.bind( CHANGE, that._refreshHandler );

    if (that.options.autoBind) {    
        that.dataSource.fetch();
    }
}

    果說在之前你沒有使用過代理 jQuery 函數(shù)，現(xiàn)在可能會有一點混亂，當_refreshHandler被調(diào)用時都會被調(diào)整，公有刷新組件功能更以及內(nèi)置的刷新功能也會相應(yīng)的實現(xiàn)，這個也會引用該組件的本身，并不是其他的類似于窗口的東西。由于關(guān)鍵字的值總是用JS改變，當刷新功能執(zhí)行的時候，這個是一個好的辦法來確保正確的范圍。

觸發(fā)綁定/綁定事件：

    最后我們只需要觸發(fā)數(shù)據(jù)綁定和數(shù)據(jù)綁定事件，在mutate DOM之前以及數(shù)據(jù)綁定直接發(fā)生之后，用公有的刷新和內(nèi)存實現(xiàn)這個。

refresh: function() {
    var that = this,
        view = that.dataSource.view(),
        html = kendo.render(that.template, view);

    // trigger the dataBinding event
    that.trigger(DATABINDING);

    // mutate the DOM (AKA build the widget UI)
    that.element.html(html);

    // trigger the dataBound event
    that.trigger(DATABOUND);
}

    與此同時，在我們的組件中現(xiàn)在已經(jīng)完全啟用MVVM，這就意味著我們可以像下面這個樣自定義組件：

<div data-role="repeater" data-bind="source: dataSource">
<script>
    var viewModel = kendo.observable({
        dataSource:  new kendo.data.DataSource({
            transport: {
                read: "Customers/Orders",
                dataType: "json"
            }
        })  
    });
    kendo.bind(document.body.children, viewModel);
</script>

    以上就是完整的示例了，需要注意的是，當你添加一個項目到數(shù)據(jù)源的時候，它就會立即反映到中繼器組件中。

var viewModel = kendo.observable({
    items: ["item1", "item2", "item3"],
    newItem: null,
    add: function(e) {
        if (this.get("newItem")) {
            this.get("items").push(this.get("newItem"));
        }
    }
});

kendo.bind(document.body, viewModel);

>>>Kendo UI Web下載