CODEWITHSUNDEEP
ember.js
eduard
eduard

Reputation: 1495

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

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.

Upvotes: 2

Views: 679

Answers (2)

Ryan
Ryan

Reputation: 3594

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.

Upvotes: 4

eduard
eduard

Reputation: 1495

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.

Upvotes: 1

Related Questions