1

我有一个定义几个这样的事件的视图：

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

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

我尝试将事件从更改更改为单击，或从类更改为元素（选择而不是 .select-control）。第一次渲染视图时，所有事情都会起作用，仅此而已。

4

1 回答 1

0

这涉及到事件绑定在 Backbone 和 DOM 中的工作方式。

当视图呈现时，它的 $el 被添加到 DOM 中，主干会自动绑定事件。然而，一旦你从 dom 中删除了视图的 $el，当 $el 添加回 dom 时，这些事件将需要重新绑定。这就是您的 delegateEvents() 方法正在做的事情。

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

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

于 2013-10-02T16:35:13.507 回答