2011-12-26 23 views
6

ho guardato all'impaginazione in backbone https://gist.github.com/838460 e sembra tutto molto pesante per quello che sto cercando.scroll infinito leggero con backbone.js

Voglio fare un cercapersone a scorrimento infinito, e sono nuovo alla dorsale, quindi forse non lo sto semplicemente sottolineando correttamente.

quello che pensavo di fare è ottenere la prima raccolta, fare clic su un pulsante 'successivo', e ottenere i risultati e aggiungerla alla raccolta originale e rendere gli elementi appena aggiunti.

Così ho questo nel mio router ho una funzione di indice

 
    if(!myApp.list){ 
     myApp.list = new myApp.collections.list; 
     myApp.list.page = 1; 
     } else { 
     myApp.list.page++; 
     } 
     myApp.list.url='/recipes?page='+myApp.list.page; 

     myApp.list.fetch({ 
      add: true, 
      success: function() { 
       new myApp.views.list({ collection: myApp.list}); 
      }, 
      error: function() { 
       new Error({ message: "Error loading documents." }); 
      } 
     }); 

che creerà la raccolta se does't esiste, e se esiste, incrementare il 'pagina' prima di richiedere il successivo articoli nell'elenco.

quindi la prima parte della mia domanda è, c'è qualcosa di sbagliato in questo modo di fare le cose ?? Sembra molto più semplice delle altre soluzioni che ho visto.

La domanda n. 2 sembra ridicola, ma come faccio a far scattare il pulsante "successivo" per ottenere la lista successiva ??

A mio avviso, ho un pulsante "successivo", ma chiamare myApp.routers.list.index o myApp.views.list non mi fornisce un elenco aggiornato.

risposta

3

È normale che myApp.routers.list.index() non funzioni se è presente la dichiarazione del router, è necessario chiamare l'istanza del router. Ci sono molte cose da dire e Penso che la migliore spiegazione è vedere il codice funziona e se è quello che vuoi, impara il codice.

Ho creato un elenco infinito con un pulsante "Altro" per aggiungere modelli sull'elenco utilizzando il codice. La demo è in nodejitsu qui: http://infinite-scroll.eu01.aws.af.cm/

È possibile visualizzare il codice completo (client e server) sul mio succo su GitHub: https://gist.github.com/1522344 (ho aggiunto un commento per spiegare come usare i file)

+0

grazie per aver attraversato tutto quel lavoro @Atinux, credo di avere una comprensione molto meglio ora. E dalla tua risposta, presumo che non ci sia nulla di sbagliato nel farlo in questo modo? Sembra molto più chiaro rispetto agli altri metodi che ho visto. – pedalpete

+0

Non penso che ci sia qualcosa di sbagliato in questo modo. Se c'è una buona pratica per farlo, per favore fatemelo sapere. Nella mia mente, il modo più semplice è il migliore, per il codice e per l'utente. – Atinux

+0

Solo così sai, il link nodejitsu è rotto. – Zach

1

ho creato un estendono di Backbone.Collection 'semplici da utilizzare:

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

si può vedere l'attuazione a https://gist.github.com/mcspring/7655861

+1

Ad un certo punto, quell'elenco sta per morire. Preferiamo se metti il ​​codice direttamente nella tua risposta, come ho fatto qui. Ciò impedisce che questo vada via quando il tuo spirito fa. –

Problemi correlati