I have the code (inside one object) onclick: this._addX.bind(this) and then inside another object onclick: this._addY.bind(this)

Now, _addX() and _addY are nearly identical, except they both end up calling (on the click event) a function with different argument values, say _addX calls foo('x') and _addY calls foo('y'). So I tried:

onclick: this._add.bind(this,'x') and onclick: this._add.bind(this,'y') in the two objects. And of course I changed _add to accept an argument.

At runtime, when _add is called, it does not see any ining arguments! I have fumbled around with different syntaxes but nothing works. Any ideas? The original syntax works fine (no arguments) but forces me to duplicate a large function with only one line different, which pains me. Thanks in advance.

_add: function(which) {
    var me = this;
    var checkFull = function(abk) {
        if (abk.isFull) {
            alert("full");
        } else {
        alert(which);  // which is always undefined here!
        }
    };
    getAddressBook(checkFull); //checkFull is a fn called by getAddressBook
},

I have the code (inside one object) onclick: this._addX.bind(this) and then inside another object onclick: this._addY.bind(this)

Now, _addX() and _addY are nearly identical, except they both end up calling (on the click event) a function with different argument values, say _addX calls foo('x') and _addY calls foo('y'). So I tried:

onclick: this._add.bind(this,'x') and onclick: this._add.bind(this,'y') in the two objects. And of course I changed _add to accept an argument.

At runtime, when _add is called, it does not see any ining arguments! I have fumbled around with different syntaxes but nothing works. Any ideas? The original syntax works fine (no arguments) but forces me to duplicate a large function with only one line different, which pains me. Thanks in advance.

_add: function(which) {
    var me = this;
    var checkFull = function(abk) {
        if (abk.isFull) {
            alert("full");
        } else {
        alert(which);  // which is always undefined here!
        }
    };
    getAddressBook(checkFull); //checkFull is a fn called by getAddressBook
},

• javascript
• mootools
• arguments
• bind

Share Improve this question Follow edited Jan 10, 2010 at 5:05 Dave asked Jan 10, 2010 at 4:31 DaveDave 13622 silver badges1414 bronze badges 6

• @Dave, Your code should work, but its not. Can you post the _add method declaration so we can troubleshoot it? – Doug Neiner Commented Jan 10, 2010 at 4:52
• Ok, you are right. It looks fine. (I also fixed the indenting) The only two ways I know to define an event in MooTools is on the constructor ({ events: { 'click': function(){ ... } }) or by using addEvent. How exactly are you attaching the onclick function? – Doug Neiner Commented Jan 10, 2010 at 5:11
• actually creating the button in YUI and using the onClick: attribute there. var btn_Add = new CO.GG.widget.Button({ id: 'add', label: 'add X', onclick: this._add.bind(this,'x') }); I wonder if the 'which' (in the top post) is just not surviving from _add thru to the callback to checkFull()? – Dave Commented Jan 10, 2010 at 5:19
• can't figure out how to format the ments... – Dave Commented Jan 10, 2010 at 5:21
• That shouldn't be the problem, but to test just alert which right after the opening of the function. I am going to look at how YUI handles the onclick in the mean time. Also: Use backticks around your code pieces in the ments, and four space indents in the questions and answers. – Doug Neiner Commented Jan 10, 2010 at 5:25

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

this works and it keeps the scope within an element click event with the scope set to the class and not the element--there is no point in passing scope to the add method, it already has that:

var foo = new Class({
    Implements: [Options],
    add: function(what) {
        alert(what);
    },
    initialize: function(options) {
        this.setOptions(options);

        this.options.element.addEvents({
            click: function() {
                this.add(this.options.what);
            }.bind(this)
        });
    }
});

window.addEvent("domready", function() {
    new foo({
        element: $("foo"),
        what: "nothin'"
    });
});

just make an element with id=foo and click it to test (alerts nothin'). if your onclick is a function / event handler within your class as opposed to a normal element click event, then things are going to differ slightly - post a working skeleton of your work on http://mootools/shell/

If you read my previous answer, disregard it. The MooTools .bind method supports passing parameters. So something else isn't working as you expect:

onclick: this._add.bind(this, 'y');

Here is a simple setup on JSBin to show how bind truly does pass parameters.

The only purpose of bind is to "tell" the JS what object you mean when you say this. i.e. you pass as a parameter to bind an instance of the object you wish the this key word will refer to inside the function you used the bind on.