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

Question

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?

Ember Freak · Answer 1 · 2017-08-21T16:59:55.673

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

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.

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

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

score 0 · Answer 2 · answered Sep 07 '13 at 10:26

0

I'm nervous to be giving you a solution to this problem, because I'm not sure you're approaching it correctly, however:

App.PostEditController = Ember.ObjectController.extend({
  modelReloadNeeded: function () {
    this.get('content').reload();
  }.observes('currentAuthor')
});

This should reload the PostEditController's content property and therefore update your templates whenever the content's currentAuthor property changes.

answered Sep 07 '13 at 10:26

chriswessels

172
8

yep, this will help, but I've a little bit more complex situation: controller was initialized with a new model `@store.createRecord 'post'` and I want it replaced with a loaded one, not just plain reload for a current model – somebody32 Sep 07 '13 at 10:39

score 0 · Answer 3 · answered Sep 07 '13 at 18:12

0

Something like this would find a different post and then set it as the content of the PostEditController.

App.PostEditController = Ember.ObjectController.extend({
  modelReloadNeeded: function () {
    // Find another post based on author id, tweak to suit your needs
    var otherPost = this.store.find('post',{ author_id : this.get('currentAuthor.id') })
    this.set('content', otherPost );
  }.observes('currentAuthor')
});

answered Sep 07 '13 at 18:12

Jeremy Green

8,547
1
29
33

Using promise is more reliable. this.store.find('post',{ author_id : this.get('currentAuthor.id') }).then(function(post) { this.set('content', post ); }) – synthresin Sep 06 '14 at 05:27

score 0 · Answer 4 · answered Sep 07 '13 at 18:28

store.find will return you a promise, so your should resolve it to avoid issues with no methods call

App.PostEditController = Ember.ObjectController.extend
  modelReloadNeeded:(->
      postId = @get('currentAuthor').get('post_id')
      if postId?
        @store.find('post', postId).then (post) =>
          @set('content', post)
    ).observes('currentAuthor.post_id')

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

4 Answers4

Linked