ihid / ember-infinite-pagination

Infinite Pagination for EmberJS

Infinite Pagination for EmberJS

This adds infinite pagination to Ember JS. It works, but it is a work in progress and maybe be riddled with bugs.

Please add issues galore as I intend to make this good 😃

Installation

You can download the latest version from Github. Don't link to this file as Github won't send JS headers.

You also need jQuery.inView, which you can get the latest version from their Github Repository.

Usage

In your route, you need to setup the controller to have the correct data. Simply pass in your store, model and controller, and the data will be loaded from your paginationParams (see under config).

App.BlogPostsRoute = Ember.Route.extend({
  setupController: function(controller) {
    IHID.InfinitePagination.setupRoute(App.BlogPost, controller)
  }
})

In your controller, extend the controller mixin:

Meducation.ResourcesController = Ember.ArrayController.extend(IHID.InfinitePagination.ControllerMixin)

In your template, use the LoadMoreView, e.g.:

{{#each blog_post in controller}}
  {{render 'blog_post' blog_post}}
{{/each}}

{{view IHID.InfinitePagination.LoadMoreView}}

Configuration

You can override certain options in the controller.

Can I load more data?

Specify whether more data can be loaded from the server. Defaults to:

canLoadMore:function() {
    this.get('currentPage') < 10
}.property('currentPage')

Changing the parameters

By default, the current page is added to the request. You can add more parameters like so:

paginationParams: function(){
    $.extend(this._super(), {searchCriteria: $('.search').val()})
}

Searching

There is some build in support for searching. To implement it, add the following to your view (you'll need a textbox with a class of search in your template).

didInsertElement: function() {
    $('.search').keypress(function(){
      Ember.tryInvoke(this.get('controller'), 'search')
    })
}

This resets the page to 1. You'll need to add whatever parameters you need as per above.

Development

This project uses Grunt.js, so after checking out the repo, a simple npm install will install all dependencies needed to build this library.

The source files are located in lib/src and the tests are in lib/tests.

To run the tests invoke grunt test.

Contributing

Add issues, send pull requests. All the normal stuff. VERY happy to hear from you!

As normal:

• Fork
• Branch
• Hack
• Commit
• Pull request

Credit

The original idea and code for this was by @pangratz. See this Stack Overflow question and these commits for history. I am now turning that into something more generic and maintainable.

Licence

Copyright (c) 2013 Jeremy Walker and contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

ember-infinite-pagination's Issues

store is not require

 setupRoute: (store, model, controller) ->
    content = store.filter model, controller.paginationParams(), (data) ->
      true

    controller.set 'content', content

Can simply be:

 setupRoute: (model, controller) ->
    content =  model.filter controller.paginationParams(), (data) ->
      true

    controller.set 'content', content

There is no need to pass the store instance around.

Explicit target is not required

<a {{action "loadMore" target="controller" }}> click to load more</a>

can simply be

<a {{action "loadMore"}}> click to load more</a>. Given a loadMore property exists on the controller, it will be invoked.