backbone.js

Question

के साथ अंतहीन/अनंत स्क्रॉल प्रकार समाधान मैं backbone.js के साथ घूम रहा हूं और मैं सोच रहा हूं कि मॉडल/संग्रह के लिए मॉड्यूल/संग्रह के लिए 'अंतहीन-स्क्रॉल' स्थिति बनाने के लिए और अधिक संक्षिप्त समाधान है या नहीं। देख रहे हैं (jquery के लिए कई हैं, शायद अन्य पुस्तकालयों के लिए अधिक)।

कुछ खोज कुछ भी नहीं के बगल में बदल गईं, इसलिए मैंने सोचा कि मैं रीढ़ की हड्डी के साथ अपना स्वयं का समाधान बनाने की कोशिश करने से पहले पूछूंगा, अगर मुझे रीढ़ की हड्डी के संग्रह के बाहर कुछ बनाना चाहिए, या अगर किसी ने कुछ ऐसा करने का प्रयास किया है।

Answer 1

यह blog post हाल ही में मेरे ट्विटर स्ट्रीम पर उतर गया। एक बहुत अच्छा समाधान की तरह लग रहा है और main page पर अच्छी तरह से काम करता है। ब्लॉग से इस समाधान का लाभ हैं:

1. वापस बटन संरक्षित रखता है।
2. हैशबैंग का उपयोग नहीं करता है, इससे कोई फर्क नहीं पड़ता कि ट्विटर इंजीनियर कितने खुश हैं।
3. असीमित स्क्रॉलिंग पर देता है अगर (1) असंभव है।
4. प्रगतिशील रूप से बढ़ता है: जब (3) होता है, तो उपयोगकर्ता अधिक सामग्री के लिए एक अच्छा ओल 'हाइपरलिंक का पालन करता है।

Answer 2

SlickGrid एक विकल्प यदि आप इसे प्रयास नहीं किया है हो सकता है: 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

रीढ़ और jQuery वेपोइंट साथ एक अन्य समाधान: https://gist.github.com/davidmontoyago/6336612

Answer 5

के बाद विस्तार से काम करना चाहिए: 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।

Answer 6

एक और बार-बार जवाब:

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