An explanation of the _.bindAll () function from Underscore.js is required

Question

I studied some backbone.js and I saw many instances where _.bindAll() . I read the entire page backbone.js and underscore.js to try to understand what she is doing, but I'm still very unclear about what she is doing. The following is an explanation:

 _.bindAll(object, [*methodNames]) 

Applies a series of methods to the object specified by the method name to execute in the context of this object when they are called. It is very convenient for the binding functions that go for use as event handlers, which are otherwise called using it is useless. If no Names method is provided, all function property objects will be associated with it.

 var buttonView = { label : 'underscore', onClick : function(){ alert('clicked: ' + this.label); }, onHover : function(){ console.log('hovering: ' + this.label); } }; _.bindAll(buttonView); jQuery('#underscore_button').bind('click', buttonView.onClick); => When the button is clicked, this.label will have the correct value... 

If you can help here by providing another example, perhaps, or some kind of verbal explanation, everything will be appreciated. I tried to find more tutorials or examples, but zero that serve what I need. Most people seem to just know what it does automatically ...

Answer 1

 var Cow = function(name) { this.name = name; } Cow.prototype.moo = function() { document.getElementById('output').innerHTML += this.name + ' moos' + '<br>'; } var cow1 = new Cow('alice'); var cow2 = new Cow('bob'); cow1.moo(); // alice moos cow2.moo(); // bob moos var func = cow1.moo; func(); // not what you expect since the function is called with this===window _.bindAll(cow1, 'moo'); func = cow1.moo; func(); // alice moos 

 <div id="output" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 

Unfortunately, the actual “bind all” functionality only works with functions directly on the object. To enable the function defined in the prototype, you need to pass these function names as additional arguments to _.bindAll() .

Anyway, you need an explanation: basically it allows you to replace a function on an object with a function that has the same name and behavior, but is also bound to that object, so this === theObject without even calling it as a method ( theObject.method() ).

Answer 2

The simplest explanation, as for me, is the following:

 initialize:function () { //backbone initialize function this.model.on("change",this.render); //doesn't work because of the wrong context - in such a way we are searching for a render method in the window object this.model.on("change",this.render,this); //works fine //or _.bindAll(this,'render'); this.model.on("change",this.render); //now works fine //after _.bindAll we can use short callback names in model event bindings } 

Answer 3

try it

 <input type="button" value="submit" id="underscore_button"/> <script> var buttonView = { id : 'underscore', onClick: function () {console.log('clicked: ' + this.id)}, onHover: function () {console.log('hovering: ' + this.id)} } _.bindAll(buttonView, 'onClick') $('#underscore_button').click(buttonView.onClick) $('#underscore_button').hover(buttonView.onHover) </script>