Проблемы с областями видимости, указывающие на неправильное «это» - PullRequest
Новая
       17

Проблемы с областями видимости, указывающие на неправильное «это»

0 голосов
/ 09 июля 2019

Я уже несколько дней бьюсь головой о стену, пытаясь решить проблему, связанную с this. Когда я звоню this.model на initialize, он корректно возвращает контактную информацию, хотя, как только я редактирую информацию и нажимаю кнопку сохранения, this.model появляется undefined. После небольшого поиска и большого количества консольных логов кажется, что this берет после нажатия кнопки. В идеале кнопка сохранения будет сравнивать предыдущие значения с обновленными значениями, а затем обновлять модель, прежде чем отправлять ее в базу данных. Вот как выглядит мой грязный initialize: 

initialize: function(contact) {
  this.listenTo(App.Emitter, 'contacts:edit', this.render);
  this.template = window['JST']['editContact'];
  this.collection = App.Contacts2;

  if (contact.model) {
    console.log('INITIALIZE CONTACT HAS A MODEL', contact) // shows correct data
  }

  $('.save').on('click', this.save.bind(this))
  // this.$('.save').on('click', (contact)=> this.save(contact)) <--- also tried with no success

}

Как только мы доберемся до функции save, все пойдет бананом. При нажатии я получаю console.log, показывающий this свойства кнопки, а не переданную информацию: 

save: function(contact) {
  console.log('SAVE FUNCTION START: ', contact, this) //contact= button's 'this', this= object with view's 'this' but no contact information

  if (contact.model) {
    this.yay = contact.model
    console.log('save function', this.yay) // doesn't show up :(
  }

  console.log('secondary model', this.yay) // undefined
}

Может кто-нибудь помочь мне понять, почему this такой упрямый? Мне просто нужны контактные данные, чтобы перейти к функции сохранения.

1 Ответ

0 голосов
/ 10 июля 2019

Спасибо всем за помощь. Я обнаружил, что мое решение состояло из двух частей:

Во-первых, мне нужно было связать событие в функции рендеринга вместо функции инициализации.

Во-вторых, мне нужно было добавить новый прослушиватель событий в функцию рендеринга вместо событий, хотя я не совсем уверен, почему это работает.

Вот как выглядит функция рендеринга с двумя добавленными строками: 

    render: function() {

    this.$el.html( this.template() );
    this.editContact();
    $('.saveEdit').on('click', _.bind(this.save, this))
    this.listenTo(App.Emitter, 'save', this.save())
    return this;
},
...