全局设置Kendo UI窗口值

Question

我正在使用很多Kendo UI窗口.有没有办法在某种程度上全局指定默认值？或者更真实的版本,我可以用预定义的值创建一些父级,然后只覆盖我需要更改的值吗？

例如,我想要所有窗口的相同错误行为和模态参数,所以我想做类似的事情:

$("#parentWindow").kendoWindow({
     modal: true,
     error: function () {
          this.close();
          new Notification().error();
     }
});

然后使用父窗口作为新窗口的基础:

$("#newWindow").kendoWindow({
     title: "This window should have the options (modal and error) of the parentWindow",     
}).??getTheRestOfTheValuesFromParent()??;

或者重写一些参数:

$("#newWindow2").kendoWindow({
     modal: false,
     title: "A window with overwritten modal parameter",     
}).??getTheRestOfTheValuesFromParent()??;

是否有可能实现这一点,是否有可能出现类似C#继承的东西？也许这是一个愚蠢的问题,但我对JS并不熟悉.

Answer 1

我强烈建议您在所有 - 或者至少是那些更复杂的 - kendo小部件上创建自己的包装器代码.我的团队多年来一直在这个项目中使用kendo来完成所有事情,我们正在取得非常积极的成果.主要目的是您需要的:全球行为.如果在您的项目上编码了数千个窗口后,您需要更改它们,只需更改包装器即可.它只是一个简单的jQuery函数:

$.fn.MyWindow = function(options) {
    var $target = $(this);
    var widget = {
        _defaultOptions: {
            actions: ["Minimize", "Maximize", "Close"],
            visible: false,
            width: 400,
            height: 400,
            modal: true
        },
        _options: options || {},
        _target: $target,
        _widget: null,

        _init: function() {
            this._manageOptions();
            this._createWidget();

            return this;
        },

        _manageOptions: function() {
            // Here you can perform some validations like displaying an error when a parameter is missing or whatever
            this._options = $.extend(this._options, this._defaultOptions);
        },

        _createWidget: function() {
            this._widget = this._target.kendoWindow(this._options).data("kendoWindow");

            // Create here some behaviours that the widget doesn't haves, like closing the window when user click the black overlay
            if (this._options.closeOnOverlayClick) {
                $('body').off('click', '.k-overlay').on('click', '.k-overlay', function() {
                    this._widget.close();
                }.bind(this));
            }
        },

        Show: function(center) {
            if (center) {
                this._widget.center();
            }

            this._widget.open();
        }
    };

    return widget._init();
};

var wnd = $("#wnd").MyWindow({
    title: "My first window",
    closeOnOverlayClick: true // Your own parameter
});

// Now you work with your own functions:
wnd.Show(true);

演示.

有很多自定义项,比如你自己的事件 - 其中一些kendo的小部件没有 - 等等.