Coffeescript 'cette' à l'intérieur de jQuery .chacun()

J'ai quelques coffeescript comme suit:

class foo:
    @bar = 'bob loblaw'

    processRows: ->
        $("#my-table>tr").each ->
            id = $(this).attr("id")
            @processRow id

    processRow: (id) ->
        console.log @bar + id

Donc mon problème est: j'ai besoin de this de référence de la .each contexte à l'intérieur de la boucle pour arriver à id, mais je voudrais aussi this pour faire référence à l'instance de classe à l'intérieur de foo.processRow()---qui ne sont pas à l'heure actuelle.

En utilisant quelque chose comme _this = this à l'extérieur de la .each de la fonction et de la passer autour n'est pas une bonne solution, car j'ai la référence de nombreuses variables de classe à l'intérieur de processRow.

Toute pensée? Ai-je raté quelque chose d'évident? Merci!

InformationsquelleAutor | 2011-08-31

coffeescript javascript

128

jQuery.chaque passe à l'élément courant comme second paramètre de la fonction de rappel, vous n'avez pas ont pour réserver this pour jQuery:
```
processRows: ->
    $("#my-table>tr").each (index, element) =>
        id = $(element).attr("id")
        @processRow id
```
Notez l'utilisation de la graisse flèche (=>) de la syntaxe pour la fonction de rappel; il se lie à la fonction de cadre à la valeur actuelle de this. (this dans la fonction de rappel est toujours la même this que le temps que vous avez défini la fonction.)
- C'est exactement ce que je cherchais. Merci!!!
- Le gras flèche de syntaxe a fait le tour pour moi! Voulais juste souligner à nouveau pour tous ceux qui cherchent à ce.
- MERCI!! Cela m'a beaucoup aidé!
- $("#my-table>tr").each (index, element) => => ou -> !?
InformationsquelleAutor Arnaud Le Blanc
6

Vous dire

En utilisant quelque chose comme _this = this à l'extérieur de la .each de la fonction et de la passer autour n'est pas une bonne solution, car j'ai la référence de nombreuses variables de classe à l'intérieur de processRow.

C'est la solution la plus efficace, bien que. JavaScript est this est une drôle de bête; vous pouvez le garder à l'intérieur d'une fonction imbriquée à l'aide de la => opérateur, comme arnaud576875 sugests dans sa réponse (qui est élégant, mais inefficace), ou vous pouvez copier this à une autre variable (qui est efficace mais peu élégante). Le choix est le vôtre.

Noter que certains navigateurs modernes soutenir un bind méthode sur chaque fonction, qui est plus efficace que CoffeeScript est =>. Il y a un billet open pour avoir => utiliser le natif bind si disponible: https://github.com/jashkenas/coffee-script/pull/1408

Addendum: bien sûr, une alternative plus efficace que tous les ci-dessus serait d'écrire
```
for element, index in $('#my-table>tr')
  ...
```
qui permettrait également de résoudre votre this problème.
- for element, index in $('#my-table>tr') est à la fois élégante et comme vous l'avez dit plus efficace, mais n'est pas la même que l'utilisation de jquery.each(), car avec for il n'existe pas de fonction de liaison. Si vous définissez une autre fonction imbriquée (comme la liaison d'un écouteur d'événement), à l'intérieur défini vars n'aura que la valeur de la dernière itération, provoquant étrange comportement de certains moments.
- À droite, il n'y a pas la portée dans un for boucle, mais l'interlocuteur de l'exemple original ne comportait pas toutes les fonctions, de sorte for...in est une très bonne solution (et, comme indiqué, plus efficace). Si il y a des centaines de trs, la surcharge inutile de faire appel de fonction peut être perceptible.
InformationsquelleAutor Trevor Burnham

Votre code...

class foo
    @bar = 'bob loblaw'

    processRows: ->
        $("#my-table>tr").each ->
            id = $(this).attr("id")
            @processRow id

    processRow: (id) ->
        console.log @bar + id

Est transpiled à...

var foo;
foo = (function() {
  function foo() {}
  foo.bar = 'bob loblaw';
  foo.prototype.processRows = function() {
    return $("#my-table>tr").each(function() {
      var id;
      id = $(this).attr("id");
      return this.processRow(id);
    });
  };
  foo.prototype.processRow = function(id) {
    return console.log(this.bar + id);
  };
  return foo;
})();

Qui a pris beaucoup de sujet sur le contexte actuel qu'il est capable de traduire. Malheureusement, depuis jQuery gère contexte, vous devrez être explicite ou déclarer une référence à votre classe this.

D'ailleurs, il y a d'autres problèmes avec ce code généré, jetez un oeil à cette réduction de l'affaire:

class foo
    @bar = 'bob loblaw'

    getBar: () ->
        @bar

Transpiles à:

var foo;
foo = (function() {
  function foo() {}
  foo.bar = 'bob loblaw';
  foo.prototype.getBar = function() {
    return this.bar;
  };
  return foo;
})();

Les résultats de la tentative d'utilisation de ce morceau de code:

> foo.bar;
"bob loblaw"

> var f = new foo();
undefined

> f.getBar();
undefined

Votre code semble s'attendre à ce que @bar est une propriété propre, mais il a été créé comme une propriété statique de la foo fonction

oups, my bad! J'ai oublié d'inclure le constructeur. Donc mon code est en fait plus comme: class foo constructeur: () -> @bar = 'bob loblaw' --tromper, de ne pas formater cette avec des sauts de ligne, mais vous voyez l'idée :). merci pour la réponse!

InformationsquelleAutor Rick

Vous devez vous connecter pour publier un commentaire.