主干视图事件仅在视图呈现后触发一次

Backbone View event firing only once after view is rendered

本文关键字:视图 一次 事件      更新时间:2023-09-26

从路由器,我使用以下代码创建一个搜索视图:
(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;
},


任何建议将不胜感激。

由于您不再调用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');
}