New Addon: Ember CLI Pagination - Looking to help people get setup

Wrote an addon for pagination, got it into working order today, would love to hear questions/feedback/etc.

https://github.com/mharris717/ember-cli-pagination

3 Likes

Iā€™d be happy to help anyone whoā€™d like to use Ember CLI Pagination in their application, so that people can start using it and I can get feedback. We can jump on Skype for an hour and get everything working.

For now open up an issue if youā€™d like me to assist.

https://github.com/mharris717/ember-cli-pagination/issues

I tested it but ember-cli canā€™t find it. I am new to add-onā€™s so you can see what a beginner does :wink:

https://github.com/broerse/ember-cli-blog/tree/pagination

If I say return this.findPaged('post',params); does your mixin do the return this.get('store').find('post'); ??

@broerse Thanks for the feedback! Iā€™ll check it out today.

@broerse What is the pagination story on the backend? For this app the backend appears to be CouchDB, accessed using EmberPouch.

Is there an easy way I can get a backend running for testing? Is it just a CouchDB instance running on my machine?

CouchDB is running just on your own machine. If you skip the CouchDB install it will also work but store the data in your browsers IndexDB.

Working exmple without pagination. Myapp

Main problem is the PouchDB adapter doesnā€™t have a findQuery method, so thereā€™s no way to lookup by page.

I hacked in a quick one just to see it work and to educate myself. Iā€™m posted that code at the end, just in case anyone wants it, but my intent isnā€™t for you to hack this stuff in yourself, but if you want to, feel free! Iā€™ll post a better writeup soon with a cleaner solution.

Other problems:

  • The app needs coffeescript, my bad for not calling that out. Iā€™ll be converting all the coffeescript to js soon, for now add it to package.json

  • Ember throws a ā€œPath cannot be emptyā€ error. I have no idea why. The app still works with the error, Iā€™m ignoring it for now.

// package.json
"ember-cli-coffeescript": "0.0.5"

// bower_components/ember-pouch/dist/globals/main.js
findQuery: function(store, type, params) {
    this._init(type);

    var perPage = 2;

    var getRecordsForPage = function(objs,page) {
      var start = (page-1)*perPage;
      var end = start+perPage;

      return objs.slice(start,end);
    }

    var totalPages = function(objs) {
      var res = parseFloat(objs.length) / parseFloat(perPage);
      return Math.ceil(res);
    };

    var me = this;

    var promise = new Promise(function(fulfill,reject) {
      me.db.rel.find(type.typeKey).then(function(records) {
        var newRecords = {
          posts: getRecordsForPage(records.posts,params.page),
          meta: {total_pages: totalPages(records.posts)}
        };
        fulfill(newRecords);
      });
    });

    return promise;
  }

I will try this. Thinking about pagination in general makes me think that query parameters on the controller like sort and page should have nothing to do with the model data. You just change the view based on the same model data. I am a beginner so I could be completely wrong hereā€¦

You should perhaps also take a look at firebase, https://github.com/broerse/ember-cli-blog-fire It also does not have a findQuery.

Could you elaborate on this?

I added "ember-cli-coffeescript": "0.0.5" and hacked ember-pouch but is seems ember serve canā€™t find the files because they are not specified in the package.json can you perhaps create a pull request on https://github.com/broerse/ember-cli-blog/tree/pagination

Hum, I was thinking that if ember.computed.sort ( http://balinterdi.com/2014/03/05/sorting-arrays-in-ember-dot-js-by-various-criteria.html) lives on the controller pages should be handled the same way. If I understand well the controller caches the data so there should be no need to access the model if you change a thing like sort or page. But as I said I am not at your level ā€¦ yet :wink:

@broerse did you do an npm install after adding coffeescript?

I believe I get it.

Youā€™re talking about a scenario where all the data is already loaded client-side, and changing pages is showing a different subset of the data in the store.

Iā€™m designing for the case where Ember only request the data for the current page from the backend, and requests each new page when itā€™s needed for display.

Even in that case, I debated using a route param, a query param, or neither. I opted for the query param, but itā€™s open for debate.

Yes I did. I get:

ENOENT, no such file or directory ā€˜C:\dev\ember-cli-blog\tmp\tree_merger-tmp_des t_dir-QejASzDx.tmp\ember-cli-pagination\controller-mixin.jsā€™ Error: ENOENT, no such file or directory ā€˜C:\dev\ember-cli-blog\tmp\tree_merger- tmp_dest_dir-QejASzDx.tmp\ember-cli-pagination\controller-mixin.jsā€™

A route param seems wrong to me to. You can debate if it is more the ember way to automatically create routes for pages but I think it breaks bookmarking. If your dataset is now 4 pages and you bookmarked the /8 page you end up nowhere. So I also think a bookmarked query param ?page=8 can be handled if you have only have 4 pages now.

If you donā€™t have all the data and want to use sort parameter how do you know there is no new data coming in later on page 1. I think the future is data sync where ember-pouch and firebase are just the beginning.

So I think if you look at GitHub - gcollazo/ember-cli-addon-search: This project is no longer maintained please visit Ember Observer you can bookmark http://addons.builtwithember.io/#/?query=pagi but if you what to show pages based on the output from your query you have the same problem as with ember-couch or firebase.

Perhaps pagination should also work in scenarios like the ember-cli-addon-search output.

<3 this. I was in the middle of rolling my own pagination for my personal blog. Iā€™ll give this a try!

1 Like

Pushed out 0.1.3, it no longer requires coffeescript

@broerse still thinking about what you said, havenā€™t forgotten you :smile: