2011-12-26 17 views
6

he mirado la paginación en la red troncal https://gist.github.com/838460, y todo parece muy pesado para lo que estoy buscando.pergamino infinito liviano con backbone.js

Quiero hacer una paginación de tipo de desplazamiento infinito, y soy nuevo en la red troncal, así que tal vez no estoy entendiendo correctamente.

lo que pensé que iba a hacer es obtener la primera colección, hacer clic en el botón "siguiente" y obtener los resultados y anexarlos a la colección original y representar los elementos recién agregados.

Así que tengo esto en mi router tengo una función de índice

 
    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." }); 
      } 
     }); 

que va a crear la colección si does't existe, y si existe, incrementar la 'página' antes de solicitar el siguiente artículos en la lista.

así que la primera parte de mi pregunta es, ¿hay algo de malo en esta forma de hacer las cosas? Parece mucho más simple que las otras soluciones que he visto.

La pregunta n. ° 2 parece ridícula, pero ¿cómo disparo el botón 'siguiente' para obtener la lista siguiente?

En mi opinión, tengo el botón 'siguiente', pero llamar a myApp.routers.list.index o myApp.views.list no me da una lista actualizada.

Respuesta

3

Es normal que myApp.routers.list.index() no funcione si hay una declaración del enrutador, debe llamar a la instancia del enrutador. Hay muchas cosas que decir y Creo que la mejor explicación es ver que el código funcione y si es lo que quieres, aprende el código.

Creé una lista infinita con un botón "Más" para agregar modelos en la lista con el uso de su código. La demostración está en nodejitsu aquí: http://infinite-scroll.eu01.aws.af.cm/

Puede mostrar el código completo (cliente y servidor) en mi GIST en GitHub: https://gist.github.com/1522344 (añadí un comentario para explicar cómo utilizar los archivos)

+0

gracias por pasar por todo ese trabajo @Atinux, creo que tengo una comprensión mucho mejor ahora. Y a partir de su respuesta, ¿supongo que no hay nada de malo en hacerlo de esta manera? Parece mucho más claro que los otros métodos que he visto. – pedalpete

+0

No creo que haya algo mal de esta manera. Si hay una mejor práctica para hacer esto, házmelo saber. En mi opinión, la forma más simple es la mejor, para el código y para el usuario. – Atinux

+0

Para que lo sepas, el enlace nodejitsu está roto. – Zach

1

que han creado una extensión de Backbone.Collection facil de usar:

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

se puede ver la aplicación en https://gist.github.com/mcspring/7655861

+1

En algún momento, esa idea va a morir. Preferimos que coloque el código directamente en su respuesta, como hice aquí. Eso evita que esto desaparezca cuando su esencia lo hace. –