how to display hasMany model attribute in template

Question

I have these models:

var attr = DS.attr,
    belongsTo = DS.belongsTo,
    hasMany = DS.hasMany;

Shoutzor.Album = DS.Model.extend({
    artist: belongsTo('artist'),
    title: attr('string'),
    cover: attr('string')
});

Shoutzor.Artist = DS.Model.extend({
    name: attr('string'),
    profileimage: attr('string')
});

Shoutzor.User = DS.Model.extend({
    name:           attr('string'),
    firstname:      attr('string'),
    email:          attr('string'),
    joined:         attr('date'),
    last_active:    attr('date')
});

Shoutzor.Track = DS.Model.extend({
    title: attr('string'),
    length: attr('number'),
    artist: hasMany('artist'),
    album: hasMany('album'),

    /* Convert the length in seconds to a string like '01:55' */
    convertedLength: function() {
        var sec_num = parseInt(this.get('length'), 10); // don't forget the second parm
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10 && hours > 0) {hours   = "0"+hours;}
        if (minutes < 10 && minutes > 0) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
        var time    = ((hours != 0) ? hours + ':' : '') + ((minutes != 0) ? minutes +':' : '') + seconds;

        return time;
    }.property('length')
});

Shoutzor.History = DS.Model.extend({
    track: belongsTo('track'),
    user: belongsTo('user'),
    time_played: attr('date'),

    print_time: function() {
        var d = new Date(this.get('time_played'));

        var hours   = (d.getHours() < 10 ? "0" : '') + d.getHours(),
            minutes = (d.getMinutes() < 10 ? "0" : '') + d.getMinutes(),
            seconds = (d.getSeconds() < 10 ? "0" : '') + d.getSeconds();

        return  hours + ":" + minutes + ":" + seconds;
    }.property('time_played')
});

And in my template I use this code (in my Route I connect model to this.store.all('history')):

<table id="songhistory" class="table table-condensed">
    <thead>
        <th width="30%">Title</th>
        <th width="20%">Artist</th>
        <th width="20%">Album</th>
        <th width="15%">Requested by</th>
        <th width="15%">Time played</th>
    </thead>
    <tbody>
        {{#each model}}
            <tr>
                <td>{{track.title}}</td>
                <td>{{#if track.artist}}{{#each track.artist}}{{name}}{{/each}}{{else}}Unkown Artist{{/if}}</td>
                <td>{{#if track.album}}{{#each track.abum}}{{title}}{{/each}}{{else}}Unknown Album{{/if}}</td>
                <td>{{#if user}}{{user.name}}{{else}}AutoDJ{{/if}}</td>
                <td>{{print_time}}</td>
            </tr>
        {{else}}
            <tr>
                <td colspan="5">No track history available</td>
            </tr>
        {{/each}}
    </tbody>
</table>

Now using the chrome ember extension I can confirm that my Track model contains a hasMany relation to an Artist model, however it still displays as "Unkown Artist".

How do I need to adjust my template for it to display the Artist model attribute (and optionally: if there are multiple names, separate them with a comma)?

Answer 1

Everything looks correct. You might try specifying your each helpers, and trying out the length of your array to validate that the items actually exist in there.

Additionally if you think something should exist, you can try logging it to the console using the log helper.

{{#each history in model}}
    <tr>
        <td>{{history.track.title}}</td>
        Artist Count: {{history.track.artist.length}}
        {{log history.track.artist}}
        <td>{{#each artist in history.track.artist}}{{artist.name}}{{else}}Unkown Artist{{/each}}</td>
        <td>{{#each album in history.track.album}}{{album.title}}{{/each}}{{else}}Unknown Album{{/each}}</td>
        <td>{{#if history.user}}{{history.user.name}}{{else}}AutoDJ{{/if}}</td>
        <td>{{history.print_time}}</td>
    </tr>
{{else}}
    <tr>
        <td colspan="5">No track history available</td>
    </tr>
{{/each}}

Additionally to comma separate a list on a model you'll need to render it with a new controller, then have it use an itemController. Check out this jsbin:

http://emberjs.jsbin.com/eXeTAba/2/edit