javascript - for - loop $.each jquery

Coffeescript ''esto'' dentro de jQuery.each()

Question

Tengo un coffeescript como el siguiente:

class foo:
    @bar = ''bob loblaw''

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

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

Entonces mi problema es: necesito this para hacer referencia al contexto de cada uno dentro del ciclo para obtener id , pero también me gustaría que this haga referencia a la instancia de clase dentro de foo.processRow() --- que no lo hace actualmente.

Usar algo como _this = this fuera de la función .each y pasarlo no es una gran solución, ya que hago referencia a muchas variables de clase dentro de processRow .

¿Alguna idea? ¿Me estoy perdiendo algo obvio? ¡Gracias!

Answer 1

Tu codigo...

class foo
    @bar = ''bob loblaw''

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

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

Se transporta a ...

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;
})();

Lo cual ha supuesto mucho sobre el contexto actual al que se está traduciendo. Desafortunadamente, como jQuery maneja el contexto, deberás ser explícito o declarar una referencia a esto de tu clase.

Por cierto, hay otros problemas con el código generado, eche un vistazo a este caso reducido:

class foo
    @bar = ''bob loblaw''

    getBar: () ->
        @bar

Transpiles a:

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

Los resultados de intentar usar esta pieza de código:

> foo.bar;
"bob loblaw"

> var f = new foo();
undefined

> f.getBar();
undefined

Su código parece esperar que @bar sea ​​propiedad propia, pero se está creando como una propiedad estática de la función foo

Answer 2

Tu dices

Usar algo como _this = this fuera de la función .each y pasarlo no es una gran solución, ya que hago referencia a muchas variables de clase dentro de processRow.

Esta es la solución más eficiente, sin embargo. JavaScript es una bestia extraña; puedes mantenerlo fijo dentro de una función anidada usando el operador => , ya que arnaud576875 sugiere su respuesta (que es elegante pero ineficiente), o puedes copiar this a otra variable (que es eficiente pero poco elegante). La decisión es tuya.

Tenga en cuenta que algunos navegadores modernos admiten un método de bind en cada función, que es más eficiente que CoffeeScript => . Hay un ticket abierto para tener => usar el bind nativo cuando esté disponible: https://github.com/jashkenas/coffee-script/pull/1408

Adición: Por supuesto, una alternativa más eficiente que cualquiera de las anteriores sería escribir

for element, index in $(''#my-table>tr'')
  ...

que también resolvería tu problema.

Answer 3

jQuery.each pasa el elemento actual como segundo parámetro de la devolución de llamada, por lo que no tiene que reservar this para jQuery:

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

Observe el uso de la sintaxis de la flecha de grasa ( => ) para la función de devolución de llamada; enlaza el contexto de la función con el valor actual de this . ( this en la función de devolución de llamada siempre es el mismo que en el momento en que definió la función).