javascript - 事件在附加 View 中不起作用

事件在主干的附加视图中不起作用

这是视图的方法：

events: {
  'click .toolbar_ship': 'openProfile'
},
openProfile: function() {
  gameView.$el.append(profileView.render().$el);
}

这是个人资料：

events: {
  'click .object_in_inventory': 'inventoryClick',
  'click .object_in_cell': 'cellClick',
  'click .close_profile': 'closeProfile'
},
render: function() {
  this.$el.html(this.template());
  return this;
},
closeProfile: function() {
  this.$el.remove();
}

首先，正确地附加了配置文件，并且所有在单击时的绑定都很好用，但是当我关闭配置文件然后打开一个配置文件时，没有任何点击有效。

我什至不明白为什么会这样，感谢您的帮助。

这是点击的示例：

$('.wrapGate').bind('click', function() {
.....
}

谢谢）

最佳答案

您的问题来自openProfile方法的实现。

您正在使用profileView实例，该实例已在某处进行了初始化

var profileView = new ProfileView();

ProfileView从Backbone.View扩展而来，在初始化时将delegate events
并将它们绑定到this.$el。

当您在remove()上调用jQuery的this.$el方法时，它将删除它并取消绑定所有附加事件。

下次调用openProfile时，profileView.render().$el将返回您的视图，但没有任何事件。



为了避免这种情况，您需要重构代码。在某些情况下，您可以如何实现此任务。其中之一是始终使用ProfileView的新实例，例如：

events: {
  'click .toolbar_ship': 'openProfile'
},
openProfile: function() {
  var profileView = new ProfileView();
  gameView.$el.append(profileView.render().$el);
}

并在ProfileView中：

events: {
  'click .object_in_inventory': 'inventoryClick',
  'click .object_in_cell': 'cellClick',
  'click .close_profile': 'closeProfile'
},
render: function() {
  this.$el.html(this.template());
  return this;
},
closeProfile: function() {
  this.remove(); // this.remove() is the method of Backbone.View, which will manage removing of view and unbinding of events.
}

另一个解决方案可以是当用户单击关闭个人资料时隐藏个人资料视图

events: {
  'click .toolbar_ship': 'openProfile'
},
openProfile: function() {
  if (this.profileView) {
      this.profileView.$el.show(); // your custom showing logic
  } else {
      this.profileView = new ProfileView(); // caching profileView
      gameView.$el.append(profileView.render().$el);
  }

}

并在ProfileView中：

events: {
  'click .object_in_inventory': 'inventoryClick',
  'click .object_in_cell': 'cellClick',
  'click .close_profile': 'closeProfile'
},
render: function() {
  this.$el.html(this.template());
  return this;
},
closeProfile: function() {
  this.$el.hide(); // your custom showing logic
}

当您不再需要ProfileView删除和事件解除绑定时，请不要忘记管理它。

关于javascript - 事件在附加 View 中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27313268/