1

カスタム剣道ウィジェットを作成するためのドキュメンテーションは十分であり、次のようなものにつながります:

declare var kendo: kendo;

// To be able to get types, we can express the widget as this interface
interface ICustomDatePicker {    
    options: () => kendo.ui.DatePickerOptions;
}

; (function ($:JQueryStatic, window:any, document:Document, undefined?) {
    var CustomDatePicker: ICustomDatePicker = (<any>kendo.ui.DatePicker).extend({
        init: function (element, options:kendo.ui.DatePickerOptions) {
            var self = this;            
            // base call to initialize widget
            (<any>kendo.ui.DatePicker).fn.init.call(self, element, options);
        },
        options: {
            // the name is what it will appear as off the kendo namespace (i.e. kendo.ui.CustomDatePicker). 
            // The jQuery plugin would be jQuery.fn.kendoCustomDatePicker.
            name: "CustomDatePicker"
        }
    });
    // This makes it work as a jQuery plugin
    (<any>kendo.ui).plugin(CustomDatePicker);
})(jQuery, window, document);

上記のタイプスクリプトファイルで、次のようなことをしましょう$("#datePicker").kendoCustomDatePicker({});。すべてが美しく機能します。

私の質問は、これをクラス形式で書くより良い方法はありますか? 私の当初の考えは次のとおりです。

module Foo {
    class CustomDatePicker extends kendo.ui.DatePicker {
        constructor(element, options) {
            super(element, options);
        }
    }
    (<any>kendo.ui).plugin(CustomDatePicker);
}

しかし、それは機能しません (同じ を呼び出す場合$("#datePicker").kendoCustomDatePicker({});。この Gistはより近くなりますが、構文が少しファンキーだと思います。クラスはコントロールを直接拡張しません。何かアイデアはありますか?

更新 1

この回答を見て、私はオプションの設定をクラスに含めることでクリーンアップする方法を見つけようとしています。一部のオプションでは壊れていますが、他のオプションでは壊れていませんが、次のように半作業しました。

constructor(element: Element, options?: kendo.ui.TimePickerOptions) {
    super(element, options);
    $.extend(this.options, <kendo.ui.TimePickerOptions>{
        format: "hh:mm tt",
        parseFormats: ["HH:mm", "hh:mm tt"]
    });
}

この場合、その形式が尊重され、動作していることがわかります。次のことを試してみると：

$.extend(this.options, <kendo.ui.TimePickerOptions>{
    format: "hh:mm tt",
    parseFormats: ["HH:mm", "hh:mm tt"]
});

.. 機能しません。入力をまったく解析しません。

4

1 に答える 1

3

方法はありますが、それが「いい」と言えるかどうかは 100% 確信が持てません。これが私が今日書いたコードで、動作します：

class MyTreeView extends kendo.ui.TreeView
{
    constructor(element: Element, options?: kendo.ui.TreeViewOptions) {
        super(element, options);
    }

    static fn;
}

// kendo.ui.plugin relies on the fn.options.name to get the name of the widget
MyTreeView.fn = MyTreeView.prototype;
MyTreeView.fn.options.name = "MyTreeView";

// kendo.ui.plugin which comes with the Kendo TypeScript definitions doesn't include this overload
module kendo.ui {
    export declare function plugin(widget: any, register?: Object, prefix?: String);
}

// register the plugin
kendo.ui.plugin(MyTreeView);

// extend the jQuery interface with the plugin method (needed to be used later)
interface JQuery {
    kendoMyTreeView(options?: kendo.ui.TreeViewOptions): JQuery;
}

// use the plugin
$(function () {
    $("#content").kendoMyTreeView({
        dataSource: [
            {
                text: "Root",
                items: [
                    { text: "Child" }
                ]
            }
        ]
    });
});
于 2013-06-13T18:31:37.233 に答える