javascript - 在 View 之间移动时，Backbone 会丢失下拉事件

Question

我有一个定义多个事件的 View ，如下所示:

events: {
    'click .js-icon-remove': 'removeFilter',
    'change .select-control': 'updateFilters',
    'click #btn_search': 'requestSearch',
    'click #btn_add_search': 'requestSaveSearch'
}

三个单击事件位于按钮或链接上，而更改事件位于下拉列表上。当 View 首次呈现时，所有事件都正常工作。但是，当我转到不同的页面然后返回此 View 时，下拉事件会丢失。如果我重新加载浏览器，一切都会恢复正常。它们甚至可以多次正常工作，而不仅仅是第一次。只是当我重新渲染 View 时，事件绑定(bind)丢失了。

我尝试将事件从更改更改为单击，或从类更改为元素(选择而不是.select-control)。第一次渲染 View 时，所有事情都会起作用，就是这样。

Answer 1

这将介绍事件绑定(bind)在 Backbone 和 DOM 中的工作原理。

当 View 呈现时，它的 $el 被添加到 DOM 中，backbone 会自动绑定(bind)事件。但是，一旦从 dom 中删除 View 的 $el ，当 $el 添加回 dom 时，这些事件将需要重新绑定(bind)。这就是您的 delegateEvents() 方法正在执行的操作。

在主干中工作时的最佳实践是使 View 一次性，例如，从 DOM 中删除它们后不要保留它们。当您离开 View 并将其从 dom 中删除，然后返回时，您应该重新实例化 View ，渲染它，然后再次将其添加到 dom 中。您可以保留模型和集合，这样就不必重新获取数据，但是当 View 保留在 dom 中或每次添加/删除时重新创建时， View 会工作得更好。

我强烈推荐 Marionette.js，特别是它的区域类。在 View 处理方面，它可以为您节省大量样板代码。