将模型属性插入Ember中的Img元素URL

Question

我有一个带有image_id财产的模型.我有一个包含图像元素的模型视图.我需要将id插入到image元素的src属性中以完成图像的URL,这样我才能有效地执行此操作:

<img src="news + newsItem.imageID + .jpg"></img> 

我的第一次尝试使用了Handlebars助手:

<img src="news{{newsImageURL newsItem.imageID}}.jpg"></img> 

但是这也在它周围插入了Metamprph脚本标签:

<img url="&lt;script id='metamorph-10-start' type='text/x-placeholder'&gt;&lt;/script&gt;news/7.jpg&lt;script id='metamorph-10-end' type='text/x-placeholder'&gt;&lt;/script&gt;" alt="" class="content-image news-media" /></a>

所以我看了一下使用bindAttr,但是因为我需要转换image_id值(通过前置和附加路径的其余部分),这似乎也不是解决方案.

Answer 1

有两种可能性:

1- 在模型上将图像路径声明为计算属性.如果您不喜欢这样,您可以在支持此模板的ObjectController中声明它:

模板:

// until 1.0 RC7
<img {{bindAttr src="newsItem.imagePath"}}></img> 
// from 1.0 final (the above one is deprecated)
<img {{bind-attr src=newsItem.imagePath}}></img> 

该模型:

App.NewsItem = DS.Model.extend({
  imageID: DS.attr('string'),
  imagePath: function() {
    return "/assets/news/"+this.get("imageID")+".jpg";
  }.property('imageID')
});

2-如果你不需要1中的绑定(我猜你的id不会改变)并使用 unbound helper,这不会导致脚本标记:

<img src="news{{unbound newsItem.imageID}}.jpg"></img>