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

模板繪制控件：

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

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

添加模版到選項：

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

設置這個模版的默認值：

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

實現一個刷新功能：

    由于綁定到一個change方法，現在需要實現當DataSource改變或者是被直接調用的時候，這個refresh public函數會被調用，這個刷新方法就是我將要mutate DOM的地方。首先需要做的事情就是調用我們來自DataSource數據的that.dataSource.view()，接下來就是使用kendoRender，并隨著DataSource數據通過一個模版，這個就是Kendo UI組件mutate DOM的方法。渲染方法應用數據到數據源并返回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);
}

數據源控件的完整代碼：

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

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

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將會要我們公有代表著我們組件的每一行或者是每個重復元素的DOM 片段，我們需要返回使用到的對于MVVM的最外層的元素，在通常情況下是this.element.children。由于每個模版項目呈現的是一個與綁定元素相關的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();
    }
});

改變數據源：

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

調整 _dataSource：

    對于我們用于指定和創建數據源的方法現在需要做一些調整。

_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 函數，現在可能會有一點混亂，當_refreshHandler被調用時都會被調整，公有刷新組件功能更以及內置的刷新功能也會相應的實現，這個也會引用該組件的本身，并不是其他的類似于窗口的東西。由于關鍵字的值總是用JS改變，當刷新功能執行的時候，這個是一個好的辦法來確保正確的范圍。

觸發綁定/綁定事件：

    最后我們只需要觸發數據綁定和數據綁定事件，在mutate DOM之前以及數據綁定直接發生之后，用公有的刷新和內存實現這個。

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

    與此同時，在我們的組件中現在已經完全啟用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>

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

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下載