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

在我的模板中，我使用此代码（在我的路线中将模型连接到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

如何在模板中显示hasMany模型属性

1 个答案: