filter paginate pass parameters to asynchronous em

Question

I want to implement paging/filtering on ember data asynchronously.

This is my author model:

export default DS.Model.extend({
  user: DS.belongsTo('user'),
  articles: DS.hasMany('article', { async: true }),
  name: DS.attr('string'),
  email: DS.attr('string')
});

route:

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('author', params.author_id);
  }
});

controller:

export default Ember.ObjectController.extend({
  popularArticles: function() {
    return this.get('model.articles').filter({ tab: 'popular' });
  }.property('model.articles')
});

Note that model has an articles property with DS.hasMany('article', { async: true}) relationship.

If I use this property this request is made authors/1/articles and its asynchronous.

This is fine until I need to make request like authors/1/articles?page=2 or authors/1/articles?tab="hot".

One possible approach is, as shown in the controller, I have a popularArticles property that filters the model.articles property, and will make the filtered request without loading all the articles.

How can I pass query parameters to asynchronously loaded relationships in ember data?

Answer 1

@peter-t I don know what example you search for but you can filter in a component like this:

ember-cli-blog/app/components/blog-posts.js

import Ember from 'ember';
import pagedArray from 'ember-cli-pagination/computed/paged-array';
import computedFilterByQuery from 'ember-cli-filter-by-query/util/filter';

export default Ember.Component.extend({

  pagedContent: pagedArray("filteredContent", {pageBinding: "page", perPageBinding: "perPage"}),

  totalPagesBinding: "pagedContent.totalPages",

  arrangedContent: function() {
    return Ember.ArrayProxy.extend(Ember.SortableMixin).create({
      sortProperties: ['date'],
      sortAscending: false,
      content: this.get('posts')
    });
  }.property('posts'),

  filteredContent: function() {
    return computedFilterByQuery(
      this.get('arrangedContent'),
      ['title', 'body', 'author', 'excerpt'],
      this.get('query'),
      { conjunction: 'and', sort: false}
    );
  }.property('[e-mail]', '[e-mail]', 'query'),

  actions: {
    createPost: function() {
      this.sendAction('createAction');
    }
  }
});

ember-cli-blog/app/templates/posts.hbs

{{#blog-posts posts=model page=page perPage=perPage query=query createAction="createPost"}}{{outlet}}{{/blog-posts}}

Answer 2

In the controller you can do something like this:

import Ember from "ember";
import pagedArray from 'ember-cli-pagination/computed/paged-array';

export default Ember.ArrayController.extend({
  sortProperties: ['date'],
  sortAscending: false,

  page: 1,
  perPage: 5,

  pagedContent: pagedArray("arrangedContent", {pageBinding: "page", perPageBinding: "perPage"}),

  queryParams: ["page", "perPage"],

  totalPagesBinding: "pagedContent.totalPages"
});

Answer 3

This addon may help: https://github.com/mdehoog/ember-data-has-many-query.

Allows you to add query params to has-many relationships, eg:

post.query('comments', { page: 1 });