jQuery UI 小部件覆盖方法

Question

我正在尝试编写一个小部件，允许我的代码的用户覆盖事件。

这是jsfiddle我正在尝试做的事情。

代码:

<div>Place Holder</div>​

(function ($) {
    $.widget("ui.mywidget", {
        options: {

        },
        _create: function () {

        },
        myevent: function () {
            alert('test1');
        }
    });

    $('#placeHolder').mywidget({
        myevent: function () {
            alert('test2');
        }            
    });

    $('#placeHolder').mywidget('myevent');

})(jQuery);​

$('#placeHolder').mywidget('myevent');结果是显示“test1”的警报，但应该显示“test2”。我以为事情就这么简单。我在这里缺少什么？

Answer 1

这是一个很老的问题，但其他人可能也有同样的问题。

正如评论中所述，您可以将默认事件处理函数定义为可以轻松覆盖的选项:

$.widget("ui.mywidget", {

    // Default option
    options: {
        'myevent': function() {
            alert('test1');
        }
    },

    // Public 'myevent' function
    myevent: function() {
        if($.isFunction(this.options.myevent))
            this.options.myevent();
    }
});

// Override the default 'myevent' option
$('#placeHolder').mywidget({
    myevent: function() {
        alert('test2');
    }            
});

$('#placeHolder').mywidget('myevent');

我更新了您的 jsFiddle 来说明它。