Accessing route's properties

Learning Team
1

Hey there.

Inside the index.js router I have an action that will set the value to a route’s property. Something like this:

   export default Ember.Route.extend({
     myRouteProperty: [],

     actions: {
     setValue(){
     this.get('store').query('param', {}).then((data) => {
        this.set('myRouteProperty', data);
     })
    }
  }
});

And I want to display the values that I’ve set on myRouteProperty on my index.hbs template. Something like this:

{{#each myRouteProperty as |property|}}
  <h1>{{property.name}}</h1>
{{/each}}

But I can’t access myRouteProperty inside the index.hbs template, the value is empty. I’m not sure how to properly access the data from my route without a controller, I know that I have to set the data on the model, but if I do something like this:

export default Ember.Route.extend({
         myRouteProperty: [],

         model() {
           return myRouteProperty;
        },

         actions: {
         setValue(){
         this.get('store').query('param', {}).then((data) => {
            this.set('myRouteProperty', data);
         })
        }
      }
    });

It says that myRouteProperty is undefined.

Someone’s got any ideas about it?

Thank y’all.

2

Hi @kamillacrozara,

In the Ember architecture, Routes aren’t actually connected to the template, Controllers are. The job of a route is to set up the right template and controller, and then set the controller’s model property with the return value of the model() hook.

Something like the following should work:

export default Ember.Route.extend({
  model() {
    return [];
  }
});

export default Ember.Controller.extend({
  store: Ember.inject.service(),

  actions: {
    this.get('store').query('param', {}).then((data) => {
      this.set('model', data);
    }
  }
});

{{#each model as |property|}}
  <h1>{{property.name}}</h1>
{{/each}}

Can I ask why you’re not doing the query in the model() hook and returning that?

2 Likes
3

@locks, thanks for your help. Actually I’m a little confused about the controllers being deprecated and how to transition their logic to routes. That’s why I’ve put the query inside the action on my route. With that in mind, how would I do the query without a controller?

4

Controllers are not deprecated, and you should use them normally. What material are you consulting that says this, so we can try to address it? You can also reach us at #-team-learning in the Slack group if you prefer.

5

@locks, I’m sorry, I think I’ve used the wrong word. I know they are not deprecated, but I understand that it’s a good practice to avoid controllers in new applications because Ember.js team is changing the routable controllers to the routable components. So now I’m trying to use add-ons like ember-route-action-helper to send closure actions to the route. I think that now you can understand why my code is messy. :frowning:

The solution that you pointed worked like a charm. Thank you! I’ll also check out the Slack group. =)

6

Here’s the way I handle query params from the route:

export default Ember.Route.extend({
  model: function(params) {
    return Ember.RSVP.hash({
      single: this.store.findRecord('model', params.model_id),
      all: this.store.findAll('model')
    });
  }
});

Then from the controller you can call this.get('model.single').

Or from the route, you can call this.controller.get('model.single').

For legit examples, you can check out the guides on specyifing route models and (for actions) route transitions.

1 Like