渲染视图后仅触发一次主干视图事件

Question

在路由器中，我使用以下代码创建了一个搜索视图：
（if 是只创建一个尚不存在的 new 视图，因为视图永远不会改变。）

search: function () {
    if (!this.searchView) {
        this.searchView = new SearchView();
    }
    $('#content').html(this.searchView.el);
    this.headerView.selectMenuItem('search-menu');
},

在视图中，我有一个事件哈希，将点击事件绑定到搜索按钮：

events: {
    "click .search-query": "search"
},

这会导致事件仅在第一次使用搜索按钮时触发。
从搜索功能中删除if 即可解决问题。

但这似乎不是解决此问题的正确方法，因为不需要重新创建视图（重新初始化和重新渲染）。

尝试修复：

我尝试如下将this.delegateEvents();添加到搜索视图的渲染函数中（同时将if留在搜索函数中），但没有解决问题：

render:function () {
    console.log('rendering search...');
    $(this.el).html(this.template());
    this.delegateEvents();
    return this;
},

任何建议将不胜感激。

Answer 1

由于您不再调用render()，因此不会再次调用delegateEvents。您可以直接在路由器中拨打delegateEvents。这只是一个例子；可能有更优雅的方法来做到这一点。

delegateEvents 基本上将事件重新绑定到您的视图。如果您的视图的 html 从 dom 中删除，这将很有用。这看起来像您的示例中正在发生的事情。

search: function () {
    if (!this.searchView) {
        this.searchView = new SearchView();
    }
    $('#content').html(this.searchView.el);
    this.searchView.delegateEvents();
    this.headerView.selectMenuItem('search-menu');
}