4

私はJavascriptオブジェクトリテラルを持っています:

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.Bar.find('clearButton').click(function() {
            this.trigger('clear'); // doesn't work!
            this.Bar.trigger('clear'); // works!
    }
}

Toolbar.init($('div.toolbar'));
Toolbar.bind('clear', function() { ... }); // doesn't work!
Toolbar.Bar.bind('clear', function() { ... }); // works!

clearリテラルで参照されているツールバー DOM オブジェクトではなく、ツールバー オブジェクト リテラルでイベントをトリガーできるようにしたいと考えています。これは可能ですか?もしそうなら、どうすればいいですか?

4

3 に答える 3

1

これは機能するはずです：

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.Bar.find('.clearButton').click($.proxy(function() {
            $(this).trigger('clear'); // should work now
            this.Bar.trigger('clear'); // still works
        }, this));
    }
};

Toolbar.init($('div.toolbar'));

$(Toolbar).bind('clear', function() { 
    console.log('Toolbar'); 
}); // should work now

Toolbar.Bar.bind('clear', function() { 
    console.log('Toolbar.Bar'); 
}); // still works

  1. thisクリック機能で参照を維持する必要があります。私は使用$.proxyしました; 一部の人々は使用しますvar self = this;

  2. Toolbar$()はjQueryオブジェクトではないため、 jQueryの関数にアクセスするにはラップする必要があります。また、クリック関数でインスタンスthisを参照するをラップします。Toolbar

于 2011-12-03T03:34:32.207 に答える
0

これはどう？:

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.trigger =
            function() { this.Bar.trigger.apply(this.Bar, arguments); };

        this.bind = function() { this.Bar.bind.apply(this.Bar, arguments); };

        this.Bar.find('clearButton').click(function() {
            this.trigger('clear');
    }
};

Toolbar.init();
Toolbar.bind('clear', function() { ... });

必要に応じて、ラッピングを処理する関数を簡単に作成できます。好みに応じて、これらのいずれか:

function wrapperitize(wrapper, wrappee, method /*, more_methods...*/)
{
    wrapper[method] = function() { wrappee[method].apply(wrappee, arguments); };
    for(var i = 3; i < arguments.length; ++i)
        wrapperitize(wrapper, wrappee, arguments[i]);
}

function wrapperitize(wrapper, wrappeeProp, method /*, more_methods...*/)
{
    wrapper[method] = function()
    {
        wrapper[wrappeeProp][method].apply(wrapper[wrappeeProp], arguments);
    };
    for(var i = 3; i < arguments.length; ++i)
        wrapperitize(wrapper, wrappeeProp, arguments[i]);
}

ここで、前者は as と呼ばれwrapperitize(this, this.Bar, 'trigger', 'bind')、後者はas と呼ばれますwrapperitize(this, 'Bar', 'trigger', 'bind')(違いは、前者は現在thisの状態のラッパーにthis.Barなり、後者は将来になる可能性thisのあるもののラッパーにthis.Barなるということです。

(ちなみに、ほんの少しの再帰に注意してください。これは、JavaScript でクロージャーが機能する方法に起因する問題のある変数のキャプチャを回避するためです。)

于 2011-12-03T02:57:07.207 に答える