Question

我有两个jQuery小部件，Widget A是基础小部件，Widget B继承Widget 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));

比将Widget B应用于某些HTML元素

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

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

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

但是收到错误消息

在初始化之前无法调用widgetA上的方法;尝试做通话方法＆＃39; someMethod＆＃39;

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

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

但是我需要使用基本小部件调用它...可以吗？

这是我的例子fiddle

更新

它以这种方式发生的原因here

Answer 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>")），所以你只需要为init包含上述widgetA个ializer之一即。只有this._super()或$(this.element).widgetA()

中的一个

Fiddle update

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

继承jQuery小部件并从外部调用一些基本小部件的方法

1 个答案: