Question

Don’t mind that this code uses full paths and other things. Those will change!

I have this controller code:

App.ProductsOneController.reopenClass({
    product: {
        images: []
    }
});

Then a view which has this in its template:

{{#each image in App.ProductsOneController.product.images}}
    <li class="small-image">
        <img src="{{unbound image}}-small.png" />
    </li>
{{/each}}

What I want to do, is display a list of images which updates according to the content of the images array.

And when I do something like this:

imageUrl = response.data.folder + response.data.imagedId;
tempImages = Ember.get(App.ProductsOneController, "product.images");
tempImages.unshift(imageUrl);
Ember.set(App.ProductsOneController, "product.images", tempImages);

Nothing happens. The view is not updated.

If I navigate away, and then return to this same state (we’re talking only pushstate here) the view is updated.

I have tried to change the value from the console. When I set it to [], then all images disappear as desired. If I try to set it to a non-empty array, sometimes it works, sometimes it gives me a type error, mentioning a undefined childView.

Answer 1

I have been diggin’ a lot and found out a few things about what I am doing wrong.

First, the binding. First, I have a unbound there which makes things not get get updated. Second, I should have used a ImageView.

I started doing that, used it with srcBinding. But it still doesn’t work. I cannot tell if I am still doing something wrong, or this is a bug.

App.ImageView = Ember.View.extend({
    tagName: 'img',
    attributeBindings: ['src']
});

{{view App.ImageView srcBinding="App.ProductsOneController.firstImage"}}

But the update still doesn’t happen. Actually, everything works the same way: when I change the firstImage property, nothing happens. If I navigate away and back to the same state, then I can see the change in the code.