Dynamic image src

Ember Data
1

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

Photo:

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}}>
			{{/link-to}}
		</div>
    {{/view}}
{{/each}}
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 '';
    }
}.property()

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?

2

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

}.property('content.album.photo.firstObject.filename')

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.