backbone.js 指向错误'this'范围问题

nqwrtyyt  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(123)

几天来,我一直在努力解决一个涉及this的问题。当我在initialize上调用this.model时,它会正确地返回联系人信息,尽管只要我编辑信息并单击保存按钮,this.model出现了undefined。经过一点搜索和大量的控制台日志后,保存按钮将比较以前的值和更新后的值,然后在将模型推送到数据库之前更新模型。

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如此固执?我只需要联系人数据就能进入保存功能。

oxiaedzo

oxiaedzo1#

谢谢大家的帮助。我发现我的解决方案是两部分:
首先,我需要在render函数中绑定事件,而不是在initialize函数中。
第二,我需要在render函数中添加一个新的事件侦听器,而不是在事件中,尽管我不完全确定为什么这样做。
下面是添加了两行的render函数的外观:

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;
},

相关问题