2013-10-20 91 views
1

的hasMany模型屬性我有這些模型:如何顯示在模板

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(「歷史」)) :

<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擴展灰燼,我可以確認我的追蹤模型包含的hasMany關係到一個藝術家的模型,但它仍顯示爲「未知藝術家」。

如何調整我的模板以顯示Artist模型屬性(和可選:如果有多個名稱,用逗號分隔它們)?

回答

0

一切都看起來正確。您可以嘗試指定您的每個助手,並嘗試使用數組的長度來驗證項目實際存在於那裏。

此外,如果您認爲應該存在某些內容,則可以嘗試使用日誌助手將其記錄到控制檯。

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

+0

嗯我不好,似乎餘燼擴展模塊默認,而不是null作爲一個屬於關聯屬性分配DS.manyArray任何的hasMany屬性,將有第一個現在進行調試。 – xorinzor