joneath / infiniscroll.js

Backbone.js module to add infinite scroll to a Backbone.View

infiniScroll.js

infiniScroll.js is a Backbone.js module to add infinite scrolling to your backbone views. Simply create an InfiniScroll object passing the desired collection and success callback.

Usage

###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});
  },
  remove: function() {
    this.infiniScroll.destroy();
    return Backbone.View.prototype.remove.call(this);
  }
)};

methods

• destroy() - Removes target scroll binding. Call this when you're removing the view.
• enableFetch() - Enables infiniScroll
• disableFetch() - Disables infiniScroll
• resetScroll() - Reset infiniScroll

Options

options = {
  success: function(){ },
  error: function(){ },
  target: $(window),
  param: "until",
  extraParams: {},
  pageSizeParam: "page_size",
  untilAttr: "id",
  pageSize: collection.length,
  scrollOffset: 100,
  remove: false,
  strict: false,
  includePage: false
}

• success - Success callback function called when collection.fetch is successful
• error - Error callback function called when collection.fetch raises error
• target - Target element to watch scroll. Change this if you have an internal scrolling element to infinite scroll.
• param - GET param used when collection.fetch is called
• extraParams - extra GET params used when collection.fetch is called
• untilAttr - The GET param attribute used when collection.fetch is called. Finds last record in collection and uses this param as key. Can be a function name on the model, which can be used as a computed property.
• pageSize - Used internally to determine when fetching of pages is completed.
• pageSizeParam - GET param used to send page size when collection.fetch is called.
• scrollOffset - Pixel count from bottom of page to offset the scroll for when to trigger collection.fetch
• remove - Passed to collection fetch to add new records to the collection without removing existing ones
• strict - Used to determine when to stop fetching. Setting strict on will fetch until the response size is less than the page size (This can save one extra request being made to the server, but requires the response size to be consistent). Setting strict off will fetch until the response length is equal to 0 (better for varying page size responses).
• includePage - Boolean to include the next page in the query params eg. "&page=2".

infiniscroll.js's Issues

fetchSuccess receives response that has not been parsed

Backbone's collection.fetch seems to pass a non-parsed result objet to fetchSuccess. It should probably pass the parsed version since that is what is defined to return the array which infiniScroll calls response.length on...

Wrong scrollOffset calculation?

I'm not sure if I've set this up incorrectly, but it seems something is wrong with my scrollOffset. I'm using the default options, but I see the fetch() request happening as soon as I scroll even one pixel. I don't have any CSS on html or body that may affect height calculations or anything like that.

Can anyone reproduce this?

Newly created views do not have event handlers

Hi,

I am using the plugin and love it with one exception.

My event handlers do not work for the newly fetched views?

By event handlers I mean events defined in the view event hash.

Is this something you have experienced ?

until_attr should be untilAttr

until_attr should be untilAttr in readme

Incompatible with Backbone 1.0.0

The changes from #8 need to be tweaked, now that Collection#update has been renamed to Collection#set, and is now the default option used by Collection#fetch.

Allow configuration of fetch method

In my Backbone app, I have written a function that sits on top of fetch and deals with things like params for me. I would be able to use this plugin if it allowed the configuration of not just the parameters in the fetch call, but total control over what function gets called. I should be able to use my custom method in place of fetch.

Would you consider adding this?

For reference, this is what I would like control over: https://github.com/joneath/infiniScroll.js/blob/master/lib/infiniScroll.js#L90-95

Fetch never knows when it's returned

Paging seems to work as expected without the infiniScroll plugin and when the infiniScroll scroll even triggers a fetch it never invokes the success or error callback. I'm thinking it's related to this issue #7

infiniScroll.js crashes when it's minimized

When you make a minify build of some Javascripts libraries including infiniScroll.js, the entire application crashes.

I can see that this is caused by a missing ';' in line 105.