如何在模板中顯示hasMany模型屬性

Question

我有以下模型：

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')
});

在我的模板中，我使用以下代碼（在我的Route中，將模型連接到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>

現在，使用chrome ember擴展名，我可以確認我的Track模型包含與Artist模型的hasMany關系，但是它仍顯示為“ Unkown Artist”。

我如何調整其模板以顯示Artist模型屬性（以及可選的：如果有多個名稱，請用逗號分隔它們）？

Answer 1

一切看起來都正確。 您可以嘗試指定每個幫助程序，並嘗試使用數組的長度來驗證項是否確實存在於其中。

此外，如果您認為應該存在某些內容，則可以嘗試使用日志幫助程序將其記錄到控制台。

{{#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}}

另外，要用逗號分隔模型上的列表，您需要使用新的控制器來呈現它，然后使用itemController。 看看這個jsbin：

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