Emberjs - modifying array - ember.js

Question

I have some issue with Ember that I don't really understand. I have an array like this :
var device.images = [
0: {
url: "url",
key: "key"
},
1: "url2",
2: "url3",
3: "url4"
];'
And in my controller, inside a map I try to modify every item from the array doing this :
device.images[idx] = image;
image is a new object that look like the first item of my array. But I always get the assertion failed :
Assertion Failed: You must use Ember.set() to access this property (of [object Object]...
How can I fix that ? because that should normally works no ?
[edit] Here is the complete code :
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 ) {
device.images.set( idx, image );
that.set( 'selectedItem.images', device.images );
return image;
});
});
return Ember.RSVP.Promise.all( images );
},

Answer 1

[Edit: first attempt was wrong]
It seems you should be able to use item[index] = value construct. Example usage:
App.IndexRoute = Ember.Route.extend({
resolveImage: function (that, item) {
return {
url: item,
key: "resolved"
};
},
model: function() {
var device = {
images: [
{url: "a", key: "existing"},
"b",
"c"
]
};
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.resolveImage(that, item));
}
})
.then(function(image) {
device.images[idx] = image;
return image;
});
});
return Ember.RSVP.hash({
model: Ember.RSVP.Promise.all(images),
device: device
});
},
setupController: function (c, m) {
c.set("model", m.model);
c.set("device", m.device);
}
});
<script type="text/x-handlebars" data-template-name="index">
<h2>From model</h2>
<ul>
{{#each item in model}}
<li>{{item.url}} - {{item.key}}</li>
{{/each}}
</ul>
<h2>From device</h2>
<ul>
{{#each item in device.images}}
<li>{{item.url}} - {{item.key}}</li>
{{/each}}
</ul>
</script>
JSBin here.
Barring some bug elsewhere in your code, the only remaining solution is that you are using Ember.Data and images isn't really an array but a custom class that merely implements one or several of Ember's array/enumerable mixins. [...] construct is a syntactic sugar that is hardcoded into javascript and not available to library authors to override.
I can't help you there much, as I don't use Ember.Data. You can try using explicit array mutation methods from Ember.MutableArray interface. Eg:
device.images.replace(idx, 1, [image]);
Alternatively, use object.set(key, value) construct (my first suggestion), with caveat that key value must be a string. Eg:
device.images.set(String(idx), image);
If neither of these work, you can just try to build up a new array instead of replacing members of the existing one.