Ember.js can't get data from another models

Question

I'm new with Ember and I need help to understand how to show data with multiple models. I'm using fixture adapter and there my models and fixtures

User model

App.User = DS.Model.extend({
    name: DS.attr(),
    phone: DS.attr(),
    comment: DS.attr(),
    city: DS.belongsTo('city'),
    type: DS.belongsTo('type')
});

App.User.FIXTURES = [
{
    id: 1,
    name: 'Roger Brown',
    phone: '[phone]',
    comment: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
    city: 3,
    type: 1
},
{
    id: 2,
    name: 'Ashton Black',
    phone: '[phone]',
    comment: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
    city: 4,
    type: 2
}
];

City model

App.City = DS.Model.extend({
    name: DS.attr(),
    user: DS.hasMany('user', {async: true})
});

App.City.FIXTURES = [
    {
        id: 3,
        name: 'Lisbon',
        user: [1]
    },
    {
        id: 4,
        name: 'Moscow',
        user: [2]
    }
];

Type model

App.Type = DS.Model.extend({
    name: DS.attr(),
    user: DS.hasMany('user', {async: true})
});

App.Type.FIXTURES = [
    {
        id: 1,
        name: 'individual',
        user: [1]
    },
    {
        id: 2,
        name: 'legal entity',
        user: [2]
    }
];

My user route

App.UserRoute = Ember.Route.extend({
    model: function(params){
        return this.store.find('user', params.user_id);
    }
});

User template

<div class="col-sm-12">
<div class="panel form-horizontal">
    <div class="panel-heading">
        <span class="panel-title">User View</span>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
                <p>{{name}}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Phone</label>
            <div class="col-sm-10">
                <p>{{phone}}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Comment</label>
            <div class="col-sm-10">
                <p>{{comment}}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">City</label>
            <div class="col-sm-10">
                <p>
                    {{city}}
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Type</label>
            <div class="col-sm-10">
                <p>{{type}}</p>
            </div>
        </div>
        <div class="form-group">
            <button {{action 'deleteUser'}}>Delete</button>
        </div>
    </div>
</div>
</div>
{{outlet}}

And when I trying to show user detail I get something like that

City <App.City:ember385:3>
Type <App.Type:ember388:1>

Please help to understand how to get name of this fields! Thank you very much :smile:

Answer 1

Your City and Type objects are Ember types- you would need to display the properties you are interested in, like this:

{{city.name}}
{{type.name}}