backbone.js - Backbone.js 在 VIEW 中具有自定义事件（来自另一个库的事件）？

Question

所以我正在使用 steroids.js 并且库为我提供了这个事件：

document.addEventListener("visibilitychange", onVisibilityChange, false);

function onVisibilityChange() {

}

如果我只是将它放在我的 JS 文件中，这可以工作，但是如何在带有 Backbone.js 的视图中转换？我如何使用框架实现这一点？我在初始化函数中尝试了 .on ，但它似乎不起作用。

Answer 1

如果视图具有documentas view.el，那么您可以使用eventshash监听自定义 DOM 事件。

initialize如果没有，那么您可以在方法中手动监听事件。

initialize: function() {
    $(document).on("visibilitychange", _.bind(this.hanldeVisibility, this));
}

这会起作用，所以如果它不适合你，它可能是一个竞争条件（检查任何异步行为等）。

在一个重要的方面。删除视图后清除自定义绑定事件非常重要。这通常是这样处理的：

remove: function() {
    Backbone.View.prototype.remove.call(this);
    $(document).off("visibilitychange");
}

如果之后不清理事件，则会造成内存泄漏。这最终可能会使您的应用程序崩溃。

Answer 2

1 -document用作元素：

var DocumentEventsView = Backbone.View.extend({
  el : document,
  events : {
    'visibilitychange' : 'onVisibilityChange'
  },
  onVisibilityChange : function () {
    console.log('inside onVisibilityChange');
  }
});

// test
new DocumentEventsView();
$(document).trigger('visibilitychange');

2 - 使用自定义el：

var DocumentEventsView = Backbone.View.extend({
  initialize : function () {
    $(document).on('visibilitychange', _.bind(this.onVisibilityChange, this));
  },
  onVisibilityChange : function () {
    console.log('inside onVisibilityChange');
  }
});

// test
new DocumentEventsView();
$(document).trigger('visibilitychange')