I am having issues attempting to preserve uploader as the this context when onSubmit is called. Can any JS gurus help out?

uploader: {

        init: function(){
            var that = this;

            var fileUploader = new Uploader.FileUploaderBasic({
                    button      : $("#upload-btn")[0],
                    action      : "/filesCollection",
                    onSubmit    : that.onSubmit
                });

            _.bindAll(this, this.onSubmit); // attempting to bind 'this'
        },


        onSubmit: function(id, fileName){
            console.log(this); // still refers to 'fileUploader' object :(
        }

}

Results in the following error:

Uncaught TypeError: Cannot read property 'bind' of undefined

Example: /

I am having issues attempting to preserve uploader as the this context when onSubmit is called. Can any JS gurus help out?

uploader: {

        init: function(){
            var that = this;

            var fileUploader = new Uploader.FileUploaderBasic({
                    button      : $("#upload-btn")[0],
                    action      : "/filesCollection",
                    onSubmit    : that.onSubmit
                });

            _.bindAll(this, this.onSubmit); // attempting to bind 'this'
        },


        onSubmit: function(id, fileName){
            console.log(this); // still refers to 'fileUploader' object :(
        }

}

Results in the following error:

Uncaught TypeError: Cannot read property 'bind' of undefined

Example: http://jsfiddle/WilsonPage/BE3Lp/5/

• javascript
• this
• underscore.js

Share Improve this question Follow edited Oct 25, 2011 at 10:28 wilsonpage asked Oct 25, 2011 at 10:00 wilsonpagewilsonpage 17.6k2323 gold badges105105 silver badges150150 bronze badges 1

• Came across this really great explanation of _.bind and _.bindAll: blog.bigbinary./2011/08/18/… – Bryan Downing Commented Jun 14, 2013 at 20:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Problem Solved: http://jsfiddle/WilsonPage/BE3Lp/41/

Several Important Things I Discovered:

1. The _.bindAll() must be called before the function is assigned.
2. The first argument must be the object or this you wish to bind.
3. The arguments that follow must be the names of the functions present within the object (this) and they must be in string form!
4. If you want to bind all functions in the object (this) then omit any function names and have the object (this) as the only argument eg. _.bindAll(this)

Hope this helps some confused peeps like me!

By using call or apply you can specify the context for this for any function. This should do the trick (in the fileUploader declaration):

onSubmit: function() {
    that.onSubmit.apply(that, arguments);
}

Edit: Updated jsfiddle: http://jsfiddle/WDTBV/1/