2012-04-21 2 views
3

Я пытаюсь захватить событие прокрутки в пределах Backbone.Marionette.CompositeView, но безуспешно.Захват события прокрутки на div

В качестве упражнения я переписываю http://www.atinux.fr/backbone-books/ с использованием Backbone.Marionette. Как вы можете видеть, когда вы прокручиваете вниз, появляется больше книг и отображается (т. Е. Бесконечная прокрутка). Однако я не могу зафиксировать событие прокрутки на моем представлении.

Вот мой (упрощенный) код:

LibraryView = Backbone.Marionette.CompositeView.extend({ 
    // properties, initializer, etc. 

    events: { 
     'scroll': 'loadMoreBooks', 
     'click': 'loadMoreBooks' 
    }, 

    // some functions 

    loadMoreBooks: function(){ 
     console.log("loadMoreBooks"); 
    } 
    }); 

Полный исходный код можно увидеть здесь: https://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89

То, что я не понимаю, что это событие «щелчок» в настоящее время срабатывает должным образом, но событие «прокрутки» - нет. Что я делаю не так?


Edit: так что ошибка была довольно просто, в конце концов ... Я проходил «эль: #content» в застройщик отображения вида, но свиток был определен в CSS на «.library». Поэтому, как только я изменил свое DOM из

<div id="content"> 
    <div class="library"> 
    </div> 
</div> 

в

<div id="content" class="library"></div> 

все работало правильно ...

ответ

7

Этот код работает для меня:

var View = Backbone.View.extend({ 
    events: { "scroll": "scroll" }, 
    scroll: function(){ console.log("scrolling..."); } 
}); 

Check the jsFiddle

Как @JoshLeitzel сказал, что я думаю, что этот вопрос находится в элементе DOM оно само.

Попробуйте обводной Backbone делает:

$("#content").bind("scroll", function(){ console.log("scrolling from jquery directly"); }); 

Также попробуйте заменить:

el: $('#content') 

по

el: '#content' 

Я не думаю, что это проблема, но новый стиль el определение:

+0

Ваш ответ помог мне решить проблему, спасибо. (См. Мое редактирование.) –

4

Я не знаю, что ваш el, но я подозреваю, что это то, что не получите событие scroll. Поскольку обработка делегатов Магистральных событие JQuery, посмотрят на то, что говорит о Jquery scroll event:

scroll события посылаются к элементу, когда пользователь прокручивает в виде другого места в элементе. Это относится и к window объектам, но и к SCROLLABLE кадры и элементы со свойством overflow CSS набор для прокрутки (или auto когда явная высота или ширина элемента менее , чем высота или ширина его содержимого).

Если ваш el удовлетворяет эти условия, он не получит scroll события. Вам нужно будет поместить обработчик события на window или какой-либо другой элемент, который его получит.

+0

Параметр 'el' является DIV с фиксированной высотой и' перелива-y' установлен в 'scroll'. Другими словами, он должен получить событие прокрутки. Любая другая идея, что может быть неправильно? –

+0

В конце концов, контейнер, к которому я привязывался, был не таким, как тот, на котором я определял свиток (см. Мое редактирование). Но имейте upvote для вашей помощи ;-) –

16

Магистраль прикрепляется к верхней части el элемент для поиска все события. Некоторые события DOM не помещаются в родительские элементы, и это включает в себя прокрутку. Событие click работало, потому что оно пузырилось.

Ref: http://www.w3.org/TR/2009/WD-DOM-Level-3-Events-20090908/#event-type-scroll

Смежные вопросы