Events Backbone.js-呈现其他视图后事件触发器不工作

我的路由器中有一个

addPost

功能。我不想每次调用函数时都重新创建

postAddView

：

addPost: function () {
  var that = this;
  if (!this.postAddView) {
    this.postAddView = new PostAddView({
      model: new Post()
    });
    this.postAddView.on('back', function () {
      that.navigate('#/post/list', { trigger: true });
    });
  }

  this.elms['page-content'].html(this.postAddView.render().el);
}

以下是PostAddView：

PostAddView = backbone.View.extend({
  events: {
    'click #post-add-back': 'back'
  }
  , back: function (e) {
    e.preventDefault();
    this.trigger('back');
  }
});

第一次呈现postAddView时，事件触发器工作正常。但是，在将其他视图呈现到

页面内容

并将

postAddView

呈现回后，事件触发器将不再是触发器。下面的

addPost

版本运行良好

addPost: function () {
  var that = this, view;

  view = new PostAddView({
    model: new Post()
  });

  this.elms['page-content'].html(view.render().el);

  view.on('back', function () {
    delete view;
    that.navigate('#/post/list', { trigger: true });
  });
}

---

您正在调用jQuery的某个地方

除了元素本身之外，与元素关联的所有绑定事件和jQuery数据都将被删除

因此主干用来将事件绑定到

postAddView.el

的调用将丢失。然后，当您重新添加

postAddView.el

时，不再附加

委托

，也不会触发任何事件。注意，Backbone.View的标准方法调用jQuery的

remove

；jQuery中的其他一些功能，就像我们将对事件处理程序执行类似的操作一样。因此，杀死

委托的实际函数调用可能隐藏在其他对象的深处

您可以尝试手动呼叫：

this.elms['page-content'].html(this.postAddView.render().el);
this.postAddView.delegateEvents();

或者更好的方法是，在每次需要的时候都扔掉视图，创建一个新的视图。您的视图对象应该非常轻，因此创建新的视图应该便宜，而且比手动跟踪现有视图要容易得多。
在您称之为jQuery的某个地方

除了元素本身之外，与元素关联的所有绑定事件和jQuery数据都将被删除

因此主干用来将事件绑定到
postAddView.el
的调用将丢失。然后，当您重新添加
postAddView.el
时，不再附加
委托
，也不会触发任何事件。注意，Backbone.View的标准方法调用jQuery的
remove
；jQuery中的其他一些功能，就像我们将对事件处理程序执行类似的操作一样。因此，杀死
委托的实际函数调用可能隐藏在其他对象的深处

您可以尝试手动呼叫：

this.elms['page-content'].html(this.postAddView.render().el);
this.postAddView.delegateEvents();

或者更好的方法是，在每次需要的时候都扔掉视图，创建一个新的视图。您的视图对象应该很轻，因此创建新的视图应该很便宜，而且比手动跟踪现有视图要简单得多。
如果您真的想重用当前的DOM和视图，您不需要在执行时反复设置元素，所有您调用的
.html（）都可以
您正在销毁视图的DOM，并再次生成和丢失事件。另外，我更喜欢在渲染视图之前在DOM中添加“el”。我将通过以下方式实现您的功能：

addPost: function () {
  if (!this.postAddView) {
    this.postAddView = new PostAddView({
      model: new Post()
    });
    this.postAddView.on('back', this.onBack);
    this.elms['page-content'].html(this.postAddView.el);
  }

  this.postAddView.render();

},

onBack : function () {
  this.navigate('#/post/list', { trigger: true });
}

我不喜欢用局部变量来指代“this”。如果您的所有视图在initialize方法中都使用了
..bindAll（this）
，那么您可以将事件绑定到您的视图并使用它（检查我是如何转换onBack的）

对于我的代码，不需要手动调用
this.delegateEvents（）
如果您真的想重用当前的DOM和视图，您不需要在执行时反复设置元素，您调用的一切
.html（）
都会破坏视图的DOM并再次生成和丢失事件。另外，我更喜欢在渲染视图之前在DOM中添加“el”。我将通过以下方式实现您的功能：

addPost: function () {
  if (!this.postAddView) {
    this.postAddView = new PostAddView({
      model: new Post()
    });
    this.postAddView.on('back', this.onBack);
    this.elms['page-content'].html(this.postAddView.el);
  }

  this.postAddView.render();

},

onBack : function () {
  this.navigate('#/post/list', { trigger: true });
}

我不喜欢用局部变量来指代“this”。如果您的所有视图在initialize方法中都使用了
..bindAll（this）
，那么您可以将事件绑定到您的视图并使用它（检查我是如何转换onBack的）

使用我的代码，不需要手动调用
this.delegateEvents（）