Giter Club home page Giter Club logo

infiniscroll.js's Introduction

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 People

Contributors

joneath avatar philfreo avatar johnkpaul avatar nashby avatar

Stargazers

AMaMiYa_ASuKa avatar Ganesh Kandu ( गणेश कांदु ) avatar obstolum o triggs jr avatar Andrii Tarusin avatar Virak HOR avatar calvinjeng avatar Angus H. avatar Joshua Berk avatar Alexander Savochkin avatar Kendrick Von Ledet avatar Ryan Burgess avatar gasbakid avatar David Hanson avatar Jaecheol Lee avatar geminiyellow avatar  avatar Rocco Russo avatar Mattias Pfeiffer avatar Tristan Wietsma avatar Frank Tang avatar Berkeley Martinez avatar Bartek Kruszczynski avatar Greg Connour avatar Fabien Franzen avatar Mister-T avatar Suhair Hassan E avatar Aaron Chou avatar Julie Kang avatar Huy Nguyen Quang avatar Chee Aun avatar Zachary Johnson avatar Tamas Kalman avatar Ryan MacInnes avatar  avatar Arik Epstein avatar Matt Johansen avatar Alexandru Furculita avatar Tyler Hughes avatar Brett Cooke avatar Gopesh avatar Cory Armbrecht avatar Rodrigo Iloro avatar Austin Heller avatar Seb Gotvitch avatar Alex St. avatar Robbie Bardijn avatar Steve Axthelm avatar Benjamin Adams avatar Denis Laprise avatar Kevin Coughlin avatar Wu Dong avatar jasonsee avatar Brian Chenault avatar Chris avatar Pedro Pinto avatar brandon avatar  avatar Cody Morrison avatar Junya Wako avatar Jonathan Barratt avatar Tom Davies avatar Aykut Yaman avatar Antoine Martin avatar Allen avatar Sunny Gleason avatar Darryl D. avatar Alexander Beniaminov avatar Onur Adsay avatar Austin Greco avatar  avatar Chandra Sekhar Veera avatar Todd Bashor avatar rehorn avatar Sebastian Kimberk avatar Jonathan Lin avatar Marco avatar Dave Stibrany avatar Artūras Z avatar Stephen Radford avatar Young avatar Alfredo Sumaran avatar Emanuele Ingrosso avatar Heesang Chae avatar Derek avatar Garrett Wolf avatar Brett Hammond avatar Dimitris Zorbas avatar ian parkins avatar Thomas Whitton avatar Jason avatar Steve Hanna avatar Joakim B avatar Bipen Sasi avatar Adam Okoń avatar Thomas Sileo avatar Atallah khedrane avatar Sumit Gupta avatar Chris Polk avatar Max Power avatar That's me avatar

Watchers

Sunny Gleason avatar  avatar Samson Quaye avatar gasbakid avatar James Cloos avatar 1ychen avatar Alexander Beniaminov avatar Gianalfonso Gardini avatar JunYong avatar  avatar  avatar

infiniscroll.js's Issues

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.

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?

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

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 ?

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.

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.