Я играю с backbone.js, и мне интересно, есть ли более сжатое решение для создания "бесконечной прокрутки" ситуации для моделей/коллекции, чем те модули, на которые я смотрел (их несколько jquery, возможно больше для других библиотек).
Некоторые поиски оказались почти никем, поэтому я подумал, что попрошу, прежде чем пытаться создать собственное решение с помощью магистрали, если это что-то, что я должен построить за пределами базовой системы, или если кто-то попытался что-то подобное.
Этот пост в блоге появился недавно в моем твиттер-потоке. Похоже, очень хорошее решение и хорошо работает на главной странице . Из блогов преимущества этого решения:
- Сохраняет кнопку "Назад".
- НЕ использует hashbang, независимо от того, насколько счастливы инженеры Twitter с ним.
- Дает бесконечную прокрутку, если (1) невозможно.
- Постепенно усиливается: когда (3) происходит, пользователь следует за хорошей гиперссылкой для большего контента.
Я нашел два других ресурса, исследуя это сам:
SlickGrid может быть вариантом, если вы еще не пробовали: https://github.com/mleibman/SlickGrid/wiki/Examples
Другое решение с путевыми точками Backbone и jQuery: https://gist.github.com/davidmontoyago/6336612
Следующее расширение должно работать: https://github.com/joneath/infiniScroll.js
Они также могут быть полезны для загрузки данных частично: http://backplug.io/plugin/Backbone.actAs.Paginatable, https://github.com/wyuenho/backbone-pageable, https://github.com/backbone-paginator/backbone.paginator.
Я предпочитаю поиск базовых расширений здесь: http://backplug.io.
Другой повторный ответ: вот мое расширение Backbone.Collection:
_.extend Backbone.Collection.prototype,
options:
infinitescroll:
success: $.noop
error: $.noop
bufferPx: 40
scrollPx: 150
page:
current: 0
per: null
state:
isDuringAjax: false
isDone: false
isInvalid: false
loading:
wrapper: 'backbone-infinitescroll-wrapper'
loadingId: 'backbone-infinitescroll-loading'
loadingImg: 'loading.gif'
loadingMsg: '<em>Loading ...</em>'
finishedMsg: '<em>No more</em>'
msg: null
speed: 'fast'
infinitescroll: (options={})->
# NOTE: coffeescript cannot deal with nested scope!
that = @
_.extend(@options.infinitescroll, options.infinitescroll) if options.infinitescroll
infinitescroll_options = @options.infinitescroll
# where we want to place the load message in?
infinitescroll_options.loading.wrapper = $(infinitescroll_options.loading.wrapper)
if !infinitescroll_options.loading.msg and infinitescroll_options.loading.wrapper.size() > 0
infinitescroll_options.loading.msg = $('<div/>', {
id: infinitescroll_options.loading.loadingId
}).html('<img alt="'+$(infinitescroll_options.loading.loadingMsg).text()+'" src="' + infinitescroll_options.loading.loadingImg + '" /><div>' + infinitescroll_options.loading.loadingMsg + '</div>')
infinitescroll_options.loading.msg.appendTo(infinitescroll_options.loading.wrapper).hide()
else
infinitescroll_options.loading.msg = null
fetch_options = _.omit(options, 'infinitescroll')
infinitescroll_fetch = ()=>
# mark the XHR request
infinitescroll_options.state.isDuringAjax = true
# increase page count
infinitescroll_options.page.current++
payload = {
page: infinitescroll_options.page.current
}
payload['limit'] = infinitescroll_options.page.per if infinitescroll_options.page.per isnt null
_.extend(fetch_options, {
remove: false
data: payload
})
if infinitescroll_options.loading.msg
# preload loading.loadingImg
(new Image()).src = infinitescroll_options.loading.loadingImg if infinitescroll_options.loading.loadingImg
infinitescroll_options.loading.msg.fadeIn infinitescroll_options.loading.speed, ()->
that.fetch(fetch_options)
.success (data, state, jqXHR)=>
infinitescroll_options.state.isDuringAjax = false
infinitescroll_options.state.isDone = true if _.size(data) is 0
infinitescroll_options.loading.msg.fadeOut infinitescroll_options.loading.speed, ()->
infinitescroll_options.success.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.success)
return
return
.error (data, state, jqXHR)=>
infinitescroll_options.state.isDuringAjax = false
infinitescroll_options.state.isInvalid = true
infinitescroll_options.loading.msg.fadeOut infinitescroll_options.loading.speed, ()->
infinitescroll_options.error.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.error)
return
return
return
else
that.fetch(fetch_options)
.success (data, state, jqXHR)=>
infinitescroll_options.state.isDuringAjax = false
infinitescroll_options.state.isDone = true if _.size(data) is 0
infinitescroll_options.success.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.success)
return
.error (data, state, jqXHR)=>
infinitescroll_options.state.isDuringAjax = false
infinitescroll_options.state.isInvalid = true
infinitescroll_options.error.call(data, state, jqXHR) if _.isFunction(infinitescroll_options.error)
return
return
$(document).scroll ()->
$doc = $(document)
isNearBottom = ()->
bottomPx = 0 + $doc.height() - $doc.scrollTop() - $(window).height()
# if distance remaining in the scroll (including buffer) is less than expected?
(bottomPx - infinitescroll_options.bufferPx) < infinitescroll_options.scrollPx
return if infinitescroll_options.state.isDuringAjax || infinitescroll_options.state.isDone || infinitescroll_options.state.isInvalid || !isNearBottom()
infinitescroll_fetch()
return
infinitescroll_fetch()
return