EmberJS: The best way to reload controller's model based on another property?

somebody32 picture somebody32 · Sep 7, 2013 · Viewed 13.8k times · Source

What is the best way to reload model for a current controller based on another property?

For example: I have a post controller. Author can have only one post. I want to reload post creating form if currentAuthor property changes.

I've tried that way:

App.PostEditController = Ember.ObjectController.extend
  modelReloadNeeded: Ember.observer((obj, keyName) ->
    postId = @get('currentAuthor').get('post_id')

    if postId?
      @set('model', @store.find('post', postId))
  , 'currentAuthor.post_id'
  )

It reloads everything, but returns not a real model, but promise. And also it not looks like an idiomatic Ember solution.

Maybe there is any better way to approach this problem?

Answer

Ember Freak picture Ember Freak · Mar 20, 2017

I believe reloading controllers model is equivalent to re-entering the same route. so there are lots of possibilities as of 2.12.0,

  1. You can send action to route to call refresh on the current route

Refresh the model on this route and any child routes, firing the beforeModel, model, and afterModel hooks in a similar fashion to how routes are entered when transitioning in from other route.

  1. You can specify dynamic segments in url path and use transitionTo method in Route or transitionToRoute in controller.
Router.map(function() {
  this.route('posts');
  this.route('post', { path: '/post/:post_id' });
});

and you can say this.transitionTo('post',123) this will refresh the current route and you will get 123 as params in model hook.

https://guides.emberjs.com/v2.12.0/routing/defining-your-routes/#toc_dynamic-segments http://emberjs.com/api/classes/Ember.Route.html#method_transitionTo

  1. You can specify the queryParams in the route and with refreshModel as true.
    import Ember from 'ember';
    export default Ember.Route.extend({
      queryParams: {
        postId: {
          refreshModel: true
        }
      },
      model(params) {
        //You will get query parameters value from the url through params.postId 
        return this.get('store').query('article', params);
      }
    });

You can even mention the same postId as queryParams in controller. it will refresh the route when you set postId property.

import Ember from 'ember';
export default Ember.Controller.extend({
  queryParams: ['postId'],
  postId: null, //here is the default value. default value will not be shown in URL.
});

https://guides.emberjs.com/v2.12.0/routing/query-params/#toc_opting-into-a-full-transition