javascript - Backbone.js ListenToOnce 被调用两次

Question

我有一个 View (我称之为父 View )，其中有另一个 View ( subview )。父 View 具有使用“上下文菜单”事件的元素(右键单击时，会显示一组菜单选项)。当用户从菜单中选择一个项目时，它会触发一个回调。从那里，我在 subview 中触发一个事件。这是我的触发器:

  that.trigger("editFileFolder",  {fileType: fileType});

在我的 subview 的初始化函数中，我有这个:

   this.listenToOnce(this.options.parent,'editFileFolder', this.editFileObjectEvent);

editFileObjectEvent 函数调用另一个要创建的 View (带有一些字段的对话框、取消按钮和保存按钮)。如果用户单击“取消”，则一切正常。如果用户单击“保存”按钮， View 将执行 ajax 调用、保存到服务器并关闭对话框。但是，下次用户右键单击并选择相同的菜单项时，editFileObjectEvent 会被调用两次(导致对话框被两次添加到父 View 中)。

任何人都可以解释为什么它被调用两次以及如何解决这个问题吗？如果您想查看具体代码，请告诉我，我可以添加它。问题太多了，所以我不想问太多。

谢谢

Answer 1

我认为调用 this.listenToOnce 的函数被调用了两次。你应该尽量避免这种情况。但是，如果这是不可能的，您可以通过在绑定(bind)之前取消绑定(bind)来确保监听器仅绑定(bind)一次:

this.stopListening(this.options.parent, 'editFileFolder', this.editFileObjectEvent);
this.listenToOnce(this.options.parent, 'editFileFolder', this.editFileObjectEvent);

或者您可以在实例上设置一个属性来防止绑定(bind)两次:

if (!this.__boundListener) {
  this.listenToOnce(this.options.parent, 'editFileFolder', this.editFileObjectEvent);
  this._boundListener = true;
}

所有监听器都在 this._listeningTo 中注册，您可以通过搜索来检查事件是否已绑定(bind)。

您还可以重构代码:

MyModel.extend({
  initialize: function() {
    this.bindListenToOnce = _.once(this.bindListenToOnce);
  },
  abc: function() {
    // do stuff
    this.bindListenToOnce();
    // do stuff
  },
  bindListenToOnce: function() {
    this.listenToOnce(this.options.parent, 'editFileFolder', this.editFileObjectEvent);
  }
});