Как остаться в этом контексте во время вызова ajax (jquery + coffescript)

Question

Я сделал класс:

class @GameMap
    options : {
        'width' : 100,
        'height' : 100,
        'tileWidth' : 45,
        'tileHeight' : 20,
        'scale' : 5,
        'moveDistance' : 100, #Distance to move with the map controlers
        'showErrorMessages' : true,
        'zindexDecorElementBase' : 99999,
        'zindexGroudElementBase' : 88888
    }

    lang : {
        'errContainerMissing' : "L'élement pour créer la carte n'existe pas"
    }

    constructor: (@element) ->
      this.run()

    run: ->
      this.loadDatas()

    loadDatas: (top,left) ->
      $.ajax(
          url: "/map/getnewcoord",
          data: {
             map_width : this.options.width,
             map_height : this.options.height,
             tile_height : this.options.tileHeight,
             tile_width : this.options.tileWidth,
             window_large : $('.map-windows').width(),
             window_height:  $('.map-windows').height(),
             top : top ,
             left : left
          },
          success: (data) ->
            $.each(data,(index,item) ->
              this.createTile(item.posX,item.posY);
            )
      )

    createTile: (m,n) ->
       #We are in the tile reference
       yDelta = Math.round((options.width ) * options.tileHeight );
       console.log('pass')

  $ ->
    gamemap = new GameMap("#map .block-map")

Но я получил ошибку

this.createTile не является функцией

Это потому, что "this" - это не "this" моего класса, а один из предметов, возвращаемых моим вызовом json

Как я могу сохранить "this" моего класса в функции обратного вызова ajax success?

Answer 1

Вот способ CoffeeScript сделать это:

      success: (data) =>
        $.each(data,(index,item) =>
          this.createTile(item.posX,item.posY);
        )

Это компилируется во что-то очень похожее на ответ Алекса, но, я думаю, гораздо более читабельно.Оператор => определяет функцию при использовании this, который присутствовал при ее определении, а не когда он был вызван.

Пока мы на нем, вы можете найти его более читабельным для использования@ вместо this:

          @createTile(item.posX,item.posY);

Answer 2

Сохраните ссылку на this.

Многие люди используют такой шаблон, как var that = this (или self, если он читается лучше для вас).

Тогда,в вашей внутренней функции замените ссылки на this на that, которые будут родительской функцией this.

В качестве альтернативы, вы можете заключить определения анонимной функции в $.proxy() ...

fn = $.proxy(fn, this);

... что гарантирует, что this внутри всегда будет this родителя.$.proxy() - это кросс-браузерный способ достижения bind() (который не реализован в более старых IE или Safari).

Answer 3

Вы можете передать context как параметр в метод ajax():

$.ajax({ /*...,*/ context: this/*, ...*/ });

http://api.jquery.com/jQuery.ajax/