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?

Cupreous

you should put your test page up on jsFiddle – Vola

To verify if the issue is indeed a caching issue, try appending a GET query to your javascript filenames. This will tell the browser it is a different file, even though server side the file won't have changed. <script src="backbone.js?v=1"></script> – Sophisticate

You can also disable caching in chrome by opening up the developer toolbar, clicking the gears icon and disabling the cache. #5690769 – Hiro

Why do you require to use several instances of one app ? – Mattins

Keep in mind that things go async with multiple instances. That's why sometimes it works and others not. Needs a change of logic in your implementation. – Baptistry

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.

Aluminate