CODEWITHSUNDEEP
javascriptember.js
user915303
user915303

Reputation:

Ember - images are not loaded properly during model change

I have designed a page using ember and running it over nodeJs.

This webpage contains a list of menu items. When user clicks any item, a webservice call will be made and their corresponding information (selected menu information) will be loaded to the new template.

For convenience, I placed my code template in JsBin - http://jsbin.com/apoRIhOQ/9/edit

<div class="thumb_image"><img  src="http://{image_url_path/{{unbound categoryInfo.imageName}}"/></div>

Here: http://{image_url_path}/ will be the image src location and imageName will be retrieved dynamically through webservice. (these imageNames will be changed dynamically based on the selected menu item).

My problem is:

First time, when user selects any item, all menu information are properly loaded in the new template (including image - images are loaded successfully). However, when user selects any item, except image all other information are loaded dynamically in template.

Can anyone please guide me why these images are not changed when model changed (images are rendered properly only first time).

Some additional information: I debugged categoryInfo.imageName value and found that I am receiving a proper new image_name, however its not updated in template.

Upvotes: 0

Views: 170

Answers (1)

edpaez
edpaez

Reputation: 1583

When you click on the link and transition to CategoryRoute with other params the controller object it's reused, you just change it's content or in your case categoryInfo.

Given you're using {{unbound categoryInfo.imageName}} Ember doesn't setup an observer for the categoryInfo.imageName property and therefore the template doesn't know that the property changed and that it needs to update (when you transition to the route with other params). Docs here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound

What you hace to do is to bind the categoryInfo.imageName property to your template using 

<img  {{bind-attr src="categoryInfo.imageName"}}/>

Also, you're prepending a part of the URL. So instead of binding to the property, bind to a computed property that depends on categoryInfo.imageName, like this (in you're model (or where you'd prefer)):

fullImageUrl: function () {
    return 'http://IMAGE_URL/%@'.fmt(this.get('imageName'));
}.property('imageName')

And in your template:

<img  {{bind-attr src="categoryInfo.fullImageUrl"}}/>

Upvotes: 1

Related Questions