Ember.js: How to access a model's attributes inside Javascript code

Question

In Ember.js while using ember-data , I can access a model's attributes like this when in a .hbs template:

{{#each model as |person|}}
    Welcome, {{person.firstName}} {{person.lastName}}!
{{/each}}

I tried accessing these values in Javascript code (be it inside a controller or a component) using the following methods:

// Method 1
if (person.firstName === 'Jack') {
    // Do something when the first name is Jack
}

// Method 2
if (person.get('firstName') === 'Jack') {
    // Do something when the first name is Jack
}

But none of these work to get any attributes of the current model. The only value I can get this way is the id of the current model instance.

I have looked far and wide for a solution to this problem and found nothing, so I ask this question:

Is it possible to access the attributes of a model instance inside Javascript code while using Ember.js and ember-data? If so, how can this be done? If not, why can't I do that?

For reference, here is my current Ember.js setup:

DEBUG: Ember             : 2.5.1
DEBUG: Ember Data        : 2.5.3
DEBUG: jQuery            : 2.2.4
DEBUG: Ember Simple Auth : 1.1.0

Answer 1

When you have an object that you're passing into a component, it becomes a property of the component. So you need to get that object via the component's property before accessing any properties on the model object itself.

Assuming you're passing the object into a component like this:

{{person-profile person=person}}

Either of these should work:

// Method 3
if (this.get('person').get('firstName') === 'Jack') {
  // Do something when the first name is Jack
}

// Method 4
if (this.get('person.firstName') === 'Jack') {
  // Do something when the first name is Jack
}