Passing model to controller

1

Hi,

I have a route which returns 2 models eg for a product route

model() {
  return Ember.RSVP.hash({
     page:pageModel,
     data:model
  })
}

In my product controller I want to access the (data) model. I have tried (amongst other things!)

setupController(controller,model) {
   this._super(controller,model);
   // more code 
   controller.set('productModel',model.data);
 }

However, I can’t access the productModel in the controller - eg within the init function

init() {
   let test = this.get('productModel'); 
   console.log(test.get('firstObject'); 
}

Probably doing something very basic incorrectly!

2

If I understand your question correctly, you can access the model from the controller like:

let model = this.get(‘model’);

/* or */

let page = this.get(‘model.page’);

There is no need for the setupController / init.

Even without the controller, in the template {{model.page}} should work.

Cheers

[Warning: Another Ember beginner here - trying to help:)]

1 Like
3

Hi,

Many thanks for getting back.

You are quite right - no need to call setupController, but in this case I am injecting 2 models into my route (Ember.RSVP) so I wasn’t sure if that would make any difference. In any event, if I write in my controller

 let page = this.get('model.page');

the value is null.

The reason I used the init hook in the controller was to try and grab the first object in the model.

I am doing all of this because I’m trying to set the selected state using the ember-power-select add on http://www.ember-power-select.com/ when you first load the page…

Hope that helps!

4

I think you are getting a null value, because you are calling it in controller.init. The value is only set after all of the promises have been resolved (which is not yet in controller.init). I don’t know how the select component works, but can’t you set the default (of the select) from the template ? That way you would not need a controller at all …

Cheers

5

Hi,

Many thanks for getting back. Wasn’t sure where else in the controller to test for it, so I used init() without realising that (many thanks for pointing out!).

The plugin has this code for the template

{{#power-select selected=destination options=cities onchange=(action "chooseDestination") as |name| }} {{name}} {{/power-select}}

You have to have a controller action to handle the onchange action.

The controller has the model hard coded and the intial selected state.

export default Ember.Controller.extend({
  cities: ['Barcelona', 'London', 'New York', 'Porto'],
  destination: 'London',
  actions: {
     chooseDestination(city) {
     this.set('destination', city);
     }
   }
 });

This all works fine, but in my case my data is a list of categories and if you arrive at (for example) /product/category-1 directly in the application (rather than by using the select), I need to set the selected state from the controller - and it’s this I’m struggling with…

6

The init hook is invoked at construction time. Meaning it runs before your route’s setupController hook. Of course it’s not there when you try to log it.

There’s nothing wrong with your route’s model and setupController hook. You just need to know that Ember.RSVP.hash resolves into a POJO object after the promise resolves and whatever the model hook resolves to gets set on the controller’s model property.

The data you’re looking for is at Controller#model.data

7

Many thanks for getting back - much appreciated. I’ll take another look - many thanks.

Solved - passing the selected value through the route - shouldn’t have tried to set it initially in the controller, sorry my mistake.