Backbone.js обнаруживает событие прокрутки

У меня есть следующий вид

var FullWindow = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'detect_scroll');
  },

  // bind the events
  events : {
    "scroll" : "detect_scroll"
  },

  detect_scroll: function() {
    console.log('detected');
  }
});

и я инициализирую его через

var full_window = new FullWindow({el:$('body')});

Но я не думаю, что это работает.

Когда я меняю события на

events : {
  "click" : "detect_scroll"
},

Это нормально.

Что не так?

Ответы

Ответ 1

Я не думаю, что элемент body будет запускать событие прокрутки, если вы явно не дадите ему полосу прокрутки, установив для своего свойства overflow значение scroll в CSS. Из документов jQuery:

Событие прокрутки отправляется элементу, когда пользователь прокручивается в другое место в элементе. Он применяется к объектам окна, а также к прокручиваемым фреймворкам и элементам с параметром CSS переполнения, установленным для прокрутки (или автоматически, когда высота или ширина элемента меньше высоты или ширины его содержимого).

Предполагая, что вы явно не указываете элементу body полосу прокрутки с overflow:scroll и/или фиксированную высоту, событие scroll, которое вы хотите прослушать, вероятно, запускается объектом window а не body.

Я думаю, что лучший подход здесь - отказаться от привязки события Backbone (что на самом деле является лишь сокращением и работает только с событиями в элементе view.el) и напрямую привязываться к окну в initialize():

initialize: function() {
    _.bindAll(this, 'detect_scroll');
    // bind to window
    $(window).scroll(this.detect_scroll);
}

Ответ 2

Я думаю, что проблема заключается в том, что Backbone использует делегирование событий для захвата событий, то есть придает слушателям this.$el, и что событие scroll не вымывается по определению. Итак, если событие scroll происходит для дочернего элемента (или потомка) this.$el, это событие не может наблюдаться при this.$el.

Причина, по которой он работает для click, только потому, что click пузырится вверх.

Ответ 3

Полосы прокрутки для тела и окна различны, и вы должны убедиться, что вы не прокручиваете объект окна. Вот jsfiddle, который иллюстрирует проблему, с которой вы, вероятно, сталкиваетесь.

jsfiddle

Я не уверен, что вы можете изменить "el" на объект document.window, но я не думаю, что это было бы хорошим решением в любом случае. Я бы сказал, что лучше всего использовать CSS, как я сделал, чтобы помочь вам с элементом body или создать div внутри тела и ссылаться на стих тега тела.

Удачи.

Ответ 4

У меня была такая же проблема, и вот как я ее реализовал

var MyView = Backbone.View.extend({
el: $('body'),
initialize: function() {
    $(window).scroll(function() {
        if ($(window).scrollTop()!=0 && $(window).scrollTop() == $(document).height() - $(window).height()) {
            if (mpListModel.get('next')) {
                var res = confirm('Next page?');
                if (res==true) {
                    myView.fetch()
                }
            }
        }
    });
},
events: {},
fetch: function() {
    //fetch stuff
}

}); var myView = MyView();