Question

我正在编写一个经常在网上找到的Backbone Todos应用程序的略微修改版本，而不是使用书籍。我的Backbone版本是1.3.3。与示例一样，现在我只是想在输入列表中显示用户添加的书名。我的代码（部分）如下：

app.BookList = Backbone.Collection.extend({
  model: app.Book,
  // For temp use, to be replaced with URL
  localStorage: new Backbone.LocalStorage('BookList')
});

app.bookList = new app.BookList();


app.AppView = Backbone.View.extend({
  el: '#app',

  initialize: () => {
    this.input = this.$('#book-name');
    app.bookList.on('change', this.addOneBook, this);
    app.bookList.fetch();
  },

  events: {
    'keypress #book-name': 'createNewBookModel'
  },

  addOneBook: (book) => {
    console.log('BOOK: ', book);
    const b = new app.BookView({ model: book });
    this.$('#bookList').append(b.render().el());
  },

  createNewBookModel: (e) => {
    if (e.which === 13) {
        e.preventDefault();
        app.bookList.create({ title: this.input.val().trim() });
      this.input.val('');
    }
  }

});


app.appView = new app.AppView();

我的问题是在addOneBook事件触发并完成后createNewBookModel事件未触发。我的理解（阅读本文 - http://backbonejs.org/#Collection-create）是，创建模型会触发集合上的add事件。我尝试使用bind代替on，但这并不奏效。我还尝试使用this.listenTo代替on，但这引发了错误，说this.listenTo未定义。请帮忙。谢谢！

Answer 1

我从未广泛使用过ES6 arrow functions，但我认为它们可能会给你带来麻烦。据我了解，箭头函数不绑定this对象。当您的函数正在执行时，您的this将评估为未定义的甚至是window父对象，但我认为您希望它评估为骨干对象。

尝试更换：

initialize: () => {
  // ...
},

with：

initialize: function() {
  // ...
},

和您的其他方法类似。我认为这将解决很多问题。

Backbone集合添加事件不会触发

1 个答案: