0

我有两个 jQuery 小部件，小部件 A 是基础小部件，小部件 B 继承小部件 A。

小部件 A：

$(function () {
    $.widget("custom.widgetA", {

        _create: function () {
            this.element
                .addClass('ui-widget-a')
                .append(
                    $(document.createElement('div')).text('Widget A')
                );
        },

        someMethod: function() {
            return 'widget A';
        }
    });

}(jQuery));

小部件 B：

$(function () {
    $.widget("custom.widgetB", $.custom.widgetA, {

        _create: function () {
            this.element
                .addClass('ui-widget-b')
                .append(
                    $(document.createElement('div')).text('Widget B')
                );

            this._super();
        },

        someOtherMethod: function() {
            return 'widget B';
        }
    });

}(jQuery));

比我将小部件 B 应用于某些 HTML 元素

$('#widgetB').widgetB();

现在我想someMethod从小部件 A 调用方法...为了做到这一点，我使用了这段代码

$('#widgetB').widgetA('someMethod')

但收到错误消息

无法在初始化之前调用 widgetA 上的方法；试图调用方法“someMethod”

我知道如果我这样称呼它会起作用

$('#widgetB').widgetB('someMethod')

但我需要使用基本小部件来调用它......有可能吗？

这是我的例子的小提琴

更新

在这里发生这种情况的原因

4

1 回答 1

1

真的没有什么能阻止你init在同一个元素上使用两个小部件：

$.widget("custom.widgetB", $.custom.widgetA, {

    _create: function () {
        this._super();
        $(this.element).widgetA(this.options);
    }
});

现在您可以同时调用两者：

$('#widgetB').widgetA('someMethod');
$('#widgetB').widgetB('someMethod');

在您的情况下， create 函数实际上会创建新元素（具有 jQuery 简写$("<div>")），因此您只需为ie包含上述initializer 之一。widgetA只有一个this._super()或$(this.element).widgetA()

小提琴更新

如果您在实例上存储非原始对象，这可能会导致一些额外的复杂性widgetA，但是对于这个模型，您可能一开始就不应该这样做

于 2014-09-02T10:55:08.133 回答