How is it possible to run multiple instances using Backbone.Paginator.js?

Question

I am trying to use Backbone.Paginator.js to run more than one app (multiple instances of paginator) on the same page.

I created a test page. (Navigate to backbone.paginator/examples/netflix-infinite-paging).

I left the code as is for app.js and create app2.js, which is a clone of app.js but all the javascript code is located in one file and the app has been renamed to app2.

Two instances work on first load of the page but subsequent request/refreshes only load app2.js's data.

Is it possible to run multiple instances on the same page?

• I am interested in using an auto-paging (infinite/endless scroll) so I tried to use Paul Irish's jQuery Infinite Scroll plugin but I am unable to get it to work.
• I am initiating the plugin to run on document ready (which does not work, as expected), but also running the code in the app2's ResultView, which does not work as well.

Any ideas on how to get an auto-paging infinite scroll solution?

• I ran into https://github.com/joneath/infiniScroll.js but I am not sure how to integrate it with Backbone.Paginator.js.
• I am still learning and any help would be greatly appreciated! :)

---

UPDATE: After further testing across different browsers, it seems like the problem might be to caching issue/differences. For example, in Safari, it works sometimes (randomly) when refreshing the page. I am not sure how to debug that. Any ideas?

Answer 1

Questions: 1- Are you including the jQuery Javascript framework dependencies as well in your codebase? 2- I have downloaded the zip file, ran it on Xammp locally and it appears to be a downloaded demo not a test page, can you please confirm which page is your test page from the compressed file attached to your question? 3- Can you create a mockup (in case that there is some server side code happening) in jsfiddle? 4- The link provided for the Infinite scroll jquery plugin is broken, it should be: https://github.com/joneath/infiniScroll.js

If you want to make the jQuery paginator plugin to be independent, you might want to trigger it considering the container element as well

....

From the suggested link, I think that we should experiment with this. Else you might want to create a cookie or something for the browser to remember the changes to the plugin on multiple instances.. Here are some thoughts?

1#

          Backbone.InfiniScroll(collection, **options**) 

Instantiate a new InfiniScroll object after your Backbone view has been rendered.

myView = Backbone.View.extend({   initialize: function(){     _.bindAll(this, "render");  this.render(); this.infiniScroll = new Backbone.InfiniScroll(this.collection, {success: this.appendRender}); 

} )};

2# At a glance from the Options menu

            target: $(window),  

Perhaps we should try:

  $(body).find('#container1'), 

-or-

 $(window).children('div').hasClass('container'), 

Just some ideas, haven't experimented it myself-

3# You might want to make (1) to be a javacript function and trigger it based on a class or on it's id for initializing the scroll over a desired container.

That's all the ideas I could come up by taking a look real quick, but feel free to reply if it helps out or at least gives some direction.

4# Another thought is that myView can be a variable with an id of a timestamp in Javascript, that way you can ensure uniqueness and since you are calling new then you could have several instances of the plugin running for your view.