83 votes

besoin d’explication de la fonction _.bindAll() de Underscore.js

J'ai été l'apprentissage de quelques backbone.js et j'ai vu beaucoup de cas où les _.bindAll() est utilisé. J'ai lu à travers l'ensemble de la backbone.js et underscore.js page de documentation pour essayer de se faire une idée de ce qu'il fait, mais je suis encore très floue de ce qu'il fait. Ici est le trait de soulignement de l'explication:

_.bindAll(object, [*methodNames]) 

Lie un certain nombre de méthodes sur la objet spécifié par methodNames, à être exécuté dans le contexte de cet objet chaque fois qu'ils sont invoqués. Très pratique pour la liaison des fonctions qui vont pour être utilisé en tant que gestionnaires d'événements, qui serait autrement appelée avec un assez inutile. Si aucun methodNames sont fournis, l'ensemble de l'objet propriétés de la fonction sera lié à c'.

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...

Si vous pouvez l'aider en donnant un autre exemple, peut-être, ou quelque explication verbale, tout serait appréciée. J'ai essayé de chercher pour plus de tutoriels ou des exemples, mais nul tourner jusqu'à ce que de servir ce dont j'avais besoin. La plupart des gens semblent juste savoir ce qu'il fait automatiquement...

65voto

ThiefMaster Points 135805
var Cow = function(name) {
    this.name = name;
}
Cow.prototype.moo = function() {
    alert(this.name + ' moos');
}

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

Démo: http://jsfiddle.net/ThiefMaster/XmHQN/

Malheureusement, la "lier ensemble" fonctionnalité ne fonctionne que sur les fonctions du droit sur l'objet. Pour inclure une fonction qui est définie sur le prototype que vous avez besoin pour passer ces noms de fonction explicitement comme des arguments supplémentaires à l' _.bindAll().

De toute façon, vous avez voulu une explication: Fondamentalement, il vous permet de remplacer une fonction sur un objet avec une fonction qui a le même nom et le comportement, mais est également lié à cet objet, de sorte this === theObject même sans faire appel à elle en tant que méthode (theObject.method()).

9voto

Roman Yudin Points 131

L’explication la plus simple pour moi est la suivante :

-2voto

wildpea Points 7

essaye ça

 <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>
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X