Question

用于创建自定义Kendo小部件的文档已经足够好了，并且可以导致类似：

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({});时。This Gist越来越接近，但我认为语法有点时髦 - 该类不会直接扩展控件。想法？

更新1

看看这个answer，我试图找到一种方法来清理设置选项，方法是让它在课堂上。我已经完成了下面的工作，虽然它打破了一些选项，而不是其他选项：

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

..它不起作用，根本不解析输入。

Answer 1

有一种方法，但我不是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" }
                ]
            }
        ]
    });
});

有没有一种很好的方法来使用Typescript类制作一个Kendo自定义小部件？

更新1

1 个答案: