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

Question

我有一个具有image_id属性的模型。我有一个包含图像元素的模型视图。我需要插入ID到图像元素的src属性来完成图像的URL，这样我有效地这样做：

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

我第一次尝试用一个把手帮手：

<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> 

Answer 2

您可以使bindAttr引用一个计算属性并在那里构建您的字符串。