為什么在Backbone.js中第二次渲染后事件沒有觸發？

Question

我在Backbone.js中創建了一個具有父視圖和多個子視圖的應用程序。 子視圖包含他們收聽並執行功能的鏈接。

父級存儲所有子視圖的列表。 在render函數中，在完成計算自己的html之后，它會執行以下操作：

$(this.el).html(html);
for (var i = 0; i < this.views.length; i++){
    $('.children', this.el).append(this.views[i].render().el);
}

答案：問題是我在渲染過程中創建了鏈接。 即第一次渲染（從init調用），事件成功綁定到鏈接。 但是，由於以下所有的render調用都會重新創建整個元素，因此新鏈接沒有綁定到它的處理程序。 這是通過@Tom Tu解決方案解決的， this.delegateEvents()添加到渲染中

Answer 1

您可能正在某處使用jquery remove函數從視圖中刪除子視圖 - 它會自動刪除綁定到元素（this.el）的所有事件 - 在events對象中設置。 您可以在渲染模板后使用this.delegateEvents()方法渲染子視圖，以重新綁定events對象中設置的事件委托，或者使用jquery detach方法代替從DOM中刪除元素而不刪除事件綁定（ 鏈接 ）。 delegateEvents方法非常昂貴，因此我建議使用detach方法刪除要重用的元素，如果要渲染長視圖子列表 - 如果它只是幾個視圖則無關緊要。

其他可能性是你設置了events對象錯誤 - 很難從提供的代碼量中分辨出來，但我打賭第一個。

Answer 2

一個非常普遍的挑戰。 對於這個問題的未來發現者，這里有一篇關於視圖渲染的精彩文章：

您只需要確保調用delegateEvents以隨時重新綁定子視圖上的事件.html（）運行。 由於Backbone的setElement已經調用了delegateEvents，因此快速解決方案看起來像這樣......

http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/