Wrote an addon for pagination, got it into working order today, would love to hear questions/feedback/etc.
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.
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 
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
@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 