灰烬 - 模型更换期间未正确加载图像

Question

我使用ember设计了一个页面并在nodeJs上运行它。

此网页包含菜单项列表。当用户单击任何项​​目时，将进行Web服务调用，并将其相应的信息（所选菜单信息）加载到新模板。

为方便起见，我将代码模板放在JsBin中 - http://jsbin.com/apoRIhOQ/9/edit

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

这里：http：// {image_url_path} /将是图像src位置，imageName将通过webservice动态检索。 （这些imageNames将根据所选菜单项动态更改。）

我的问题是：

首次，当用户选择任何项目时，所有菜单信息都会在新模板中正确加载（包括图像 - 图像已成功加载）。但是，当用户选择任何项目时，除了图像所有其他信息都会在模板中动态加载。

任何人都可以指导我为什么这些图像在模型改变时不会改变（图像只是第一次正确渲染）。

其他一些信息： 我调试了 categoryInfo.imageName 值，发现我收到了一个正确的新image_name，但它没有在模板中更新。

Answer 1

当您点击该链接并转换到CategoryRoute时，其他参数将被重复使用的控制器对象，您只需更改content或您的categoryInfo。

鉴于您正在使用{{unbound categoryInfo.imageName}} Ember没有为categoryInfo.imageName属性设置观察者，因此模板不知道属性已更改且需要更新（转换时）与其他参数的路线）。文档：http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound

您要做的是使用

将categoryInfo.imageName属性绑定到模板

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

此外，您还在前面部分网址。因此，不是绑定到属性，而是绑定到依赖categoryInfo.imageName的计算属性，就像这样（在你的模型中（或你喜欢的地方））：

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

在你的模板中：

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