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

问题

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?

回答1:

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

回答2:

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.

回答3:

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')
});

回答4:

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')

来源：https://stackoverflow.com/questions/18672216/emberjs-the-best-way-to-reload-controllers-model-based-on-another-property

标签

javascript

ember.js

ember-data