CODEWITHSUNDEEP
javascriptember.js
DoolAy
DoolAy

Reputation: 247

Ember: Getting model data in the controller

I am new to ember and I am building a DnD character sheet to learn and practice. Right now I am having a lot of trouble getting access to model data in a controller. After hours and hours of reading related posts it is just not clicking and I think I am misunderstanding what I am passing to the controller.

Basically what I am trying to do is grab data from a model so I can do calculations on them and then display the results of those calculations on the page.

Here is my transforms/router.js:

Router.map(function() {
    this.route('characters', { path: '/'})
    this.route('new', {path: 'new'});
    this.route('view', {path: '/:character_id'});
});

So here I am trying to pull up the view page which has the URL of the character id. Next here is my route for the view page:

export default Route.extend({
    character: function () {
       return this.store.findRecord('character', id)
    }
});

So this is finding the record of the character with the id I pass. My link looks like this and is coming from a component:

    <h5 class="card-title">{{#link-to 'view' id}}{{name}}{{/link-to}}</h5>

Now I have my controller for the view page, which looks like this:

init(id){
    let character = this.get('character')
}

When I try to log character, it is still undefined. When looking ember information in dev tools it seems the page is getting the information from the model after I refresh the page, but I just can't seem to be figure out how to grab that info in the controller itself to manipulate it.

I've been trying to figure this out for quite a while now, and its getting pretty frustrating. I currently have a work around where I do the calculations beforehand and just store all the calculated results in the model as well, but while I am learning I would like to understand how this works. Thanks is advance.

Edit: As pointed out in comments below I was missing let when defining character.

Upvotes: 0

Views: 590

Answers (1)

Lux
Lux

Reputation: 18240

Your model hook seems wrong. You're using id but never define it. Probably what you want is more like this:

character(params) {
  return this.store.findRecord('character', params.character_id);
}

Next your init hook makes no sense:

init(id){
  let character = this.get('character')
}

First there is no id passed to the init hook. Second you're missing this._super(...arguments) which should always be called when you override init.

Last is that your controller is first created and later populated with the model. Also the model is populated as model property, not character.

So you could place this in your routes template and it will work:

This is character {{model.id}}

Or if you want to change something before you pass it to the template you should use a computed property in your controller:

foo: computed('model.id', function() {
  return this.get('model.id') + ' is the id of the character';
}),

However for this code to run you need to use. The easiest way to use it is to put it into your template:

{{foo}}

Upvotes: 1

Related Questions