Hi,
I have a small issue with Ember about setting an array in my controller to update my template.
Basically, I load an array of object in my model that is display in the page, the user can click on item and this will trigger a function that receive the object that the user clicked on.
Its looks like something like this :
{{#each device in model.productList}}
<div class="panel">
<div >
<a id="show{{unbound device.key}}" data-toggle="collapse" data-target="#{{unbound device.key}}" data-parent="#product-list-wrapper" href="" {{action 'selectDevice' device}}>
</a>
</div>
</div>
{{/each}}
So my function selectDevice
will receive the entire object of this specific item. My problem here is that I would like to load a gallery of images when the user click on product from the list.
selectDevice: function( device ) {
this.set('selectedItem', device);
this.loadGallery( device );
}
In device
I have an array called images
structure like this :
images = [ "url1", "url2", "url3", "url4" ];
My objectif was to replace every item inside this array by an object with a key and an url like this :
images = [ {key: "key1", url: "url1"}, {key: "key2", url: "url2"}, [...] ];
But I would like to refresh the controller property images per images using this function :
loadGallery: function( device ) {
var that = this;
var images = device.images.map( function( item, idx ) {
return new Ember.RSVP.Promise(function( resolve ) {
if ( item.url ) {
resolve( item );
}
else {
resolve( that.imageStore.readImage( that, item) );
}
})
.then( function( image ) {
that.set('selectedItem.images.' + idx, image );
return image;
});
});
return Ember.RSVP.Promise.all( images);
}
readImage
is returning this object that should replace the item in the array.
selectedItem
is a property of my controller that should display the information and the images of the selected product.
So far, its not working properly. To refresh the image on the page I have to do this manipulation :
- Click on product1 : no images displayed
- Click on product2 : no images displayed
- Click again on product1 : images displayed !
I assume that is coming from the that.set('selectedItem.images.' + idx, image );
but I don’t understand how this can’t work.
Can you give me some help guys ?