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

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

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

function onVisibilityChange() {

}

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


backbone.js backbone-events steroids
person Community    schedule 24.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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')
person Vitalii Petrychuk    schedule 24.10.2013
comment
Это выглядит хорошо. Но я не понимаю часть _.bind(this.onVisibilityChange, this). Почему бы просто не $(document).on('visibilitychange', 'onVisibilityChange', this))? - person ; 25.10.2013
comment
Метод @Maxwell jQuery .on не принимает аргумент контекста. При использовании bind this внутри метода будет ссылаться на View this, а не на объект jQuery. Это сделано для того, чтобы поведение соответствовало обычной привязке events в Backbone. - person Simon Boudrias; 25.10.2013
comment
Я знаю, извините, я поставил лишний аргумент в конце, я не мог редактировать свой комментарий в течение пяти минут, ха-ха. Что я не понимаю, так это метод подчеркивания, для чего он нужен? Почему нельзя сразу поставить метод onVisibilityChange вместо использования метода undserscore? - person ; 25.10.2013
comment
@Maxwell, потому что в этом случае вы теряете контекст просмотра, this внутри метода onVisibilityChange будет ссылаться на метод document. - person Vitalii Petrychuk; 25.10.2013

arrow_upward
1
arrow_downward

Если представление имеет 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");
}

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

person Simon Boudrias    schedule 24.10.2013
comment
Так что я должен создать эту функцию правильно? Backbone.View.prototype.remove - person ; 25.10.2013
comment
Нет, расширяя представление, вы будете запускать свой метод при удалении представления, а не Backbone.View.prototype.remove. Вы просто хотите запустить метод по умолчанию. Метод remove, который я показал в своем ответе, на 100% функционален. - person Simon Boudrias; 25.10.2013