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


#1

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


#2

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.


#3

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'); ??


#4

@broerse Thanks for the feedback! I’ll check it out today.


#5

@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?


#6

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.


#7

Working exmple without pagination. http://exmer.com/bloggrcouch/posts


#8

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;
  }

#9

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…


#10

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


#11

Could you elaborate on this?


#12

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


#13

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:


#14

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


#15

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.


#16

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’


#17

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 https://github.com/gcollazo/ember-cli-addon-search 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.


#18

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


#19

Pushed out 0.1.3, it no longer requires coffeescript


#20

@broerse still thinking about what you said, haven’t forgotten you :smile: