Backbone collection add event not firing

我正在寫一個通常在網上找到的Backbone Todos應用程序的稍微修改版本，而不是使用書籍。我的骨幹版本是1.3.3。就像這個例子一樣，現在我只是試圖在輸入列表中顯示用戶添加的書名。我的代碼（部分）如下給出：Backbone collection add event not firing

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。請幫忙。謝謝！

來源

2017-08-14 user3033194

[Backbone arrow function and this]的可能的副本（https://stackoverflow.com/questions/41536327/backbone-arrow-function-and-this） –

我從來沒有廣泛使用ES6 arrow functions，但我認爲他們可能會導致您在這裏遇到問題。據我瞭解，箭頭功能不綁定this對象。當你的函數執行時，你的this將評估爲未定義或甚至可能是window父對象，但我認爲你希望它評估到主幹對象。

嘗試更換：

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

有：

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

和類似您的其他方法。我認爲這會清除很多問題。

來源

2017-08-14 12:04:31 arbuthnott

謝謝，確實是這個問題！ – user3033194

Backbone collection add event not firing

回答

相關問題