Kendo UI Webを使用したカスタムコンポーネントの作成(基本編)

Kendo UI Web
数百個の作成を含む
HTML5 web app
を含む必須要素
UI
コンポーネント、データ・ソース、検証、1つ
MVVM
フレーム、テーマ、テンプレートなど.にある
Kendo UI Web
では、カスタムコンポーネントを作成する方法について説明します.
基本手順:
まずkendo.ui namespaceの拡張ベースのWidgetクラスでは、パスを下に縮小するために値を保存する変数も作成できます.
拡張インフラストラクチャ:

(function($) {
    // shorten references to variables. this is better for uglification
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget

    var MyWidget = Widget.extend({
        // initialization code goes here
    });

})(jQuery);

初期化方法を追加します.
コンポーネントに初期化方法を提供する必要があります.コンポーネントが呼び出されると、この方法はフレームワークで呼び出されます.この初期化関数には、初期化中のコンポーネントパラメータと、間もなく指定するオプションの2つのパラメータが必要です.どちらのパラメータも値を設定します.

var MyWidget = Widget.extend({

    init: function(element, options) {

        // base call to initialize widget
        Widget.fn.init.call(this, element, options);

    }
});

コンポーネントにオプションを追加するには、次の手順に従います.

var MyWidget = Widget.extend({

    init: function(element, options) {

        // base call to initialize widget
        Widget.fn.init.call(this, element, options);
    },

    options: {
        // the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget). 
        // The jQuery plugin would be jQuery.fn.kendoMyWidget.
        name: "MyWidget",
        // other options go here
        ...
    }
});

では、このカスタムコンポーネントをKendo UIに追加することはできません.ここでは、独自のKendo UIコンポーネントを作成し、他のコンポーネントのように使用できる完全なテンプレートにすぎません.
カスタムコンポーネントテンプレート:

(function($) {

    // shorten references to variables. this is better for uglification var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget

    var MyWidget = Widget.extend({

        init: function(element, options) {

            // base call to widget initialization
            Widget.fn.init.call(this, element, options);

        },

        options: {    
             // the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget). 
             // The jQuery plugin would be jQuery.fn.kendoMyWidget.
             name: "MyWidget",
            // other options go here
            ....
        }

    });

    ui.plugin(MyWidget);

})(jQuery);

関連記事:
ユーザーインタフェースコントロールの王者争い:Kendo UI vs DevExpress(一)
ユーザーインタフェースコントロールの王者争い:Kendo UI vs DevExpress(二)