Backbone.js с пользовательскими событиями в VIEW (события из другой библиотеки)?

Question

Поэтому я использую steroids.js, и библиотека предоставляет мне это событие:

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

function onVisibilityChange() {

}

Это работает, если я просто поместил его в свой файл JS, но как это перевести в View с Backbone.js? Как я реализую это с помощью фреймворка? Я пытался с.on в функции инициализации, но, похоже, не работает.

Answer 1

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')

Answer 2

Если представление имеет document как view.elзатем вы можете прослушивать пользовательские события DOM, используя events хэш

Если нет, то вы можете прослушать событие вручную в initialize метод.

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

Это сработает, поэтому, если это не так, это может быть условием гонки (проверьте любое асинхронное поведение и т. Д.).

На важной стороне заметки. Очень важно очистить пользовательские связанные события, как только ваше представление будет удалено. Обычно это делается следующим образом:

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

Если вы не очистите свои события после, вы создадите утечки памяти. И это может в конечном итоге привести к сбою вашего приложения.