Component pagination

[emanuel-oprea]

I managed to make this work from a component by doing the following:

templates/products.hbs

{{products-pagination products=category.product_ids}}

templates/components/products-pagination.hbs

{{#each product in pagedProducts}}
  {{product.name}}
{{/each}}
{{page-numbers content=pagedProducts}}

components/products-pagination.hbs

import pagedArray from 'ember-cli-pagination/computed/paged-array';
export default Ember.Component.extend({
  searchProducts: function() {
    var products = this.get('products');
    return Ember.ArrayProxy.create({content: products});
  }.property('products'),
  queryParams: ["page", "perPage"],
  page: 1,
  perPage: 10,
  pagedProducts: pagedArray('searchProducts', {pageBinding: "page", perPageBinding: "perPage"}),
  totalPagesBinding: "pagedProducts.totalPages"
});

I don't know if this is the right way to do it, but it works for me (just wanted to share this).

[broerse]

Interesting. Thanks for sharing.

[mharris717]

Thanks Emanuel. Did you run into any problems while doing this?

[emanuel-oprea]

Hi, for what I'm doing now (an MVP) it works. If we decide to proceed further using ember, I'll have to investigate how to add the pagination params in the url.