我与backbone.js一起玩耍,我想知道是否有更简洁的解决方案来创建模型/集合的“无限滚动”情况,而不是模块I一直在看(有几个jQuery,可能更适合其他库)。我想我会在尝试构建我自己的骨干解决方案,如果它应该在骨干集合之外构建的东西,或者如果有人尝试过类似的东西之前,会问一些搜索。backbone.js的无尽/无限滚动类型解决方案
回答
,如果你还没有尝试过SlickGrid可能是一个选项:https://github.com/mleibman/SlickGrid/wiki/Examples
看起来很有趣,我以前见过它,但似乎太重,我现在想要的一些光线使用。 – blueblank 2011-05-23 23:46:29
与骨干和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。
我更喜欢在这里搜索Backbone扩展: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
您可以使用胖箭头=>而不是细箭头,并将外部背景带到@或_this – 2014-05-19 23:45:06
- 1. 无尽无限滚动型
- 2. Rails3.1无限/无尽滚动
- 3. RecyclerViewPagination无尽的无限滚动问题
- 4. Rails无尽页面/无限滚动
- 5. 无尽的滚动表,无限的/连续的滚动jQuery
- 6. 解决方案无效persistence.xml
- 7. 轻量级无限滚动与backbone.js
- 8. jQuery的自动滚屏解决方案
- 9. VerticalGridFragment无尽滚动
- 10. RecyclerView无尽滚动
- 11. 无尽的ListView里面滚动型
- 12. 无尽的滚动监听
- 13. 无尽的滚动gridview?
- 14. 无尽的滚动ListView
- 15. 无尽滚动的硒
- 16. Three20的TTScrollView无尽滚动?
- 17. ASP.Net中的无尽滚动(无限滚动)使用jQuery AJAX的ASPXGridView
- 18. 我该如何修复无尽的滚动,以便它可以做无尽/无限滚动?
- 19. backbone.js无效滚动/分页
- 20. PHP无限循环过程;这是好的解决方案吗?
- 21. for org.codehaus.jackson.map.JsonMappingException的解决方案:无限递归(StackOverflowError)
- 22. 无限循环在适当的解决方案
- 23. 数据仓库类型解决方案?
- 24. 如何删除冗余类型限定符解决方案?
- 25. 无限滚动
- 26. ASP.NET MaskedEditExtender&TextBox:无法输入零,解决方法?解决方案?
- 27. 解决方案的根类
- 28. 为什么动态类型的扩展方法无法解决?
- 29. 无法打开Visual Studio解决方案
- 30. 无法在另一种解决方案
这很有趣,我会考虑它。 – blueblank 2011-05-23 23:48:05
我刚写了一个无限的滚动教程也http://backbonetutorials.com/infinite-scrolling/ – 2012-04-28 04:18:18
这篇文章给出了很好的观点。不过,我个人认为,不要为非js回退而感到不适。http://developer.yahoo.com/blogs/ydn/many-users-javascript-disabled-14121.html – albertpeiro 2013-04-28 10:15:22