Ember.js array property change does not bring the desired template update

2
votes

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.

2
ember.js
could you try to replace the product property to an Ember.Object instead of a plain Js object ? – sly7_7
I tried it, product: Ember.Object.create({...}) but the things work the same. – Eduárd Moldován
Hmm, could you post a jsfiddle please ? – sly7_7
That is going to be quite difficult, because the code above is a small part of the things, but I will try. – Eduárd Moldován
In this example, we are creating an application with a router. In this case, all controllers are automatically instantiated by Ember.js. In your case, if I'm right, you are not using the router, so you have to manually instantiate classes in order to manipulate objects. App.MyClass = Ember.Controller.extend() is the declaration, then App.myClass = App.MyClass.create() is the instantiation. – sly7_7

2 Answers

4
votes

You are using Ember incorrectly as @sly7_7 has pointed out. You need to bind your srcBinding to an instance of a controller, not a class.

reopenClass is used to set functions or data on an class object. It does not make sense for you to be using this. In order for bindings to work you want to interact with instances, not classes.

// We are treating App.Controller is a class
App.Controller = Ember.Controller.extend();

// We are treating App.controller as an instance
App.controller = App.Controller.create();

So your code should read something like this.

App.controller = Ember.Controller.create({ image: 'blah' });

and then 

{{view App.ImageView srcBinding="App.controller.image"}}

Now when you change App.controller.image the binding will update.

1
votes

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.