Dynamic image src

Hello, im new in Ember, but i even cant understand what i do wrong. I have 2 models “Album”, “Photo”. Album:

export default DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
dir: DS.attr('string'),
photo: DS.hasMany('photo', {async: true})});


export default DS.Model.extend({
filename: DS.attr('string'),
album: DS.belongsTo('album'),});

Then i have album template, part of it:

<div class="row">
{{#each album in model}}
	{{#view 'photo-album-block' content=album}}
    	<div class='col-md-3'>
    		{{#link-to 'album' album.id}}
				<img {{bind-attr src=view.preview}}>
View 'photo-album-block'
preview: function() {
    var album = this.get('content');
    var firstImg = album.get('photo').get('firstObject');
    if(firstImg) {
	return album.get('dir') + '/' + firstImg.get('filename');
    } else {
	return '';

i try bind attr src for image but i get ‘albumname/undefined’. I think ‘undefined’ because model loaded after i trying to get property, but why its not observable?

You should add the path of the property that your computed property should “watch” for changes


Also, insert some console.log() into the computed property code, just to see what happens.

Note: I suggest you call the photo property photos instead to avoid confusion.