Easy endless scroll with backbone.js

I looked at the pagination at https://gist.github.com/838460 and it all seems very difficult for what I'm looking for.

I want to do endless scrolling like paging, and I'm new to the spine, so maybe I just don't underestimate it.

what I thought I would do was get the first collection, click the "Next" button and get the results and just add it to the original collection and display the newly added items.

So, I have this in my router. I have an index function.

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

which will create the collection if it does not exist, and if it exists, increase the "page" before requesting the following items in the list.

So, the first part of my question is: is there something wrong with this way? It seems a lot easier than other solutions I've seen.

Question # 2 seems ridiculous, but how do I then launch the Next button to get the following list?

In my opinion, I have a "next" button, but calling myApp.routers.list.index or myApp.views.list does not give me an updated list.

+6
source share
7 answers

It is normal that myApp.routers.list.index() does not work, if there is a router declaration, you need to call the router instance. There are many things to say, and I think the best explication is to see how the code works, and if necessary, find out the code .

I created an endless list with a More button to add models to the list using your code. The demo is on nodejitsu here: http://infinite-scroll.eu01.aws.af.cm/

You can show the full code (client and server) on my gist on GitHub: https://gist.github.com/1522344 (I added a comment to explain how to use the files)

+3
source

Here's an easy implementation https://github.com/joneath/infiniScroll.js

+2
source

I created the Backbone.Collection extension for easy use:

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

You can see the implementation at https://gist.github.com/mcspring/7655861

+1
source

Browse Endless Scrolling Backbone

It is based on one model and one view.

Here is a demo site

0
source

Source: https://habr.com/ru/post/904502/


All Articles