путать с ключевым словом "это" в jquery

Question

путать с ключевым словом "это" в jquery

0

Пожалуйста, помогите, я не мог понять это.

function Tour(el) {
  var tour = this;
  this.el = el;
  this.fetchPhotos = function() { 
    $.ajax('/photos.html', {
      data: {location: tour.el.data('location')},
      context: tour,
      success: function(response) {
        this.el.find('.photos').html(response).fadeIn();
      },
      error: function() {
        this.el.find('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
      },
      timeout: 3000,
      beforeSend: function() {
        this.el.addClass('is-fetching');
      },
      complete: function() {
        this.el.removeClass('is-fetching');
      }
    });
  }
  this.el.on('click', 'button', this.fetchPhotos);
}
$(document).ready(function() { 
  var paris = new Tour($('#paris'));
});

в функции выше, я знаю context: tour устанавливает this внутри функции this.fetchPhotos для ссылки на Tour. Поэтому мой вопрос: почему эта часть кода tour.el.data('location') изменяется на this.el.data('location')?

Спасибо вам за помощь

user1817517 11 нояб. 2013, в 08:11

Источник

0

Прочитайте это .
Tushar Gupta - curioustushar 11 нояб. 2013, в 06:38
0

вы теряете контекст this в $.ajax , объявляете как другую переменную вне $.ajax
charlietfl 11 нояб. 2013, в 06:42

Теги:

javascript

jquery

object

function

2 ответа

0

Как charlietfl писал, это другой контекст внутри AJAX обратных вызовов, вы должны кэшировать this для любой переменной до вызова AJAX и использовать эту переменную. Как и в переменной tour:

function Tour(el) {
  var tour = this;
  this.el = el;
  this.fetchPhotos = function() { 
    $.ajax('/photos.html', {
      data: {location: tour.el.data('location')},
      context: tour,
      success: function(response) {
        tour.el.find('.photos').html(response).fadeIn();
      },
      error: function() {
        tour.el.find('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
      },
      timeout: 3000,
      beforeSend: function() {
        tour.el.addClass('is-fetching');
      },
      complete: function() {
        tour.el.removeClass('is-fetching');
      }
    });
  }
  this.el.on('click', 'button', this.fetchPhotos);
}
$(document).ready(function() { 
  var paris = new Tour($('#paris'));
});

Вне АЯКС вызова (как вяжущее событие Click), это нормально, чтобы использовать this, но в тех функциях обратного вызова, это относится к обработчику обратного вызова

doodeec 11 нояб. 2013, в 05:14

Ещё вопросы

вы теряете контекст this в $.ajax , объявляете как другую переменную вне $.ajax

Paul Draper · Accepted Answer · 2013-11-11T03-59-00.000Z

Причина, по которой работает, заключается в том, что tour.el.data('location') вызывается из fetchPhotos.

Пока вы это делаете

new Tour().fetchPhotos();

и не

var f = new Tour().fetchPhotos;
f();

замена будет работать.

Но делать

this.el.on('click', 'button', this.fetchPhotos);

как последнее. Это не работает.

Чтобы немного расширить: практическое правило заключается в том, что контекст - это то, что находится слева от точки при вызове функции. this.fetchPhotos не вызывает метод, вместо этого можно представить, что это происходит так: var callback = arguments[2]; callback.call(that, args); где that === el .
@ Derija93, хорошее объяснение часто плохо объясненной концепции.