Backbone.js ile sonsuz/sonsuz kaydırma tipi çözüm

Question

Backbone ile çalışıyorum ve modüller I'den model/koleksiyon için 'sonsuz kaydırma' durumu oluşturmak için daha kısa bir çözüm olup olmadığını merak ediyorum bakıyordum (jQuery için birkaç tane var, muhtemelen diğer kütüphaneler için daha fazla).

Bazı aramalar, hiçbir şeyin yanına alınmadı, bu yüzden, omurga koleksiyonunun dışında inşa etmem gereken bir şey varsa, ya da benzer bir şey denediyse, omurgamla kendi çözümümü oluşturmaya çalışmadan önce sormam gerektiğini düşündüm.

Answer 1

Bu blog post, yakın zamanda twitter akışına indi. Çok güzel bir çözüm gibi görünüyor ve main page'da iyi çalışıyor. blogdan bu çözümün faydaları şunlardır:

1. geri düğmesine korur.
2. Bu twitter mühendisleri ne kadar mutlu olursa olsun, hashbang KULLANMAYIN.
3. (1) imkansız ise, sonsuz kaydırma yapar.
4. Aşamalı olarak geliştirir: (3) oluştuğunda, kullanıcı daha fazla içerik için iyi bir 'hiperlink' izler.

bunu denemedim eğer SlickGrid bir seçenek olabilir

Answer 2

: Kendimi bu araştırma sırasında iki diğer kaynakları bulundu https://github.com/mleibman/SlickGrid/wiki/Examples

Answer 3

:

1. https://github.com/joneath/infiniScroll.js
2. http://addyosmani.com/blog/backbone-paginator-new-pagination-components-for-backbone-js/

Answer 4

Omurga ve jQuery noktaları ile bir diğer çözüm: https://gist.github.com/davidmontoyago/6336612

Answer 5

ardından uzatma çalışması gerekir: https://github.com/joneath/infiniScroll.js

Bunlar aynı zamanda, kısmen veri yüklemek için yararlı olabilir: http://backplug.io/plugin/Backbone.actAs.Paginatable, https://github.com/wyuenho/backbone-pageable, https://github.com/backbone-paginator/backbone.paginator.

Backbone uzantılarını burada aramayı tercih ediyorum: http://backplug.io.

Answer 6

Başka tekrarlanan cevap:

ilginç

_.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 

https://gist.github.com/mcspring/7655861