javascript - 如何从动态属性将 IMG 插入到 DOM 中？

Question

我认为有以下属性:

avatar: function()
{
    var image = new Image();
    image.setAttribute('src', 'img/people/%@'.fmt('Finck_Brian.jpg'));
    return image;
}
.property(),

基本上我要做的就是使用标准的 {{ person.avatar }} 标记将返回的元素插入到 DOM 中。但是，我得到的只是以下内容:

[object HTMLImageElement]

我确信 EmberJS 中有一种方法可以取消转义返回的字符，因为它将 HTML 转换为安全字符串。像 unescape 之类的东西？

Answer 1

我认为使用 ember 最简单的方法是使用 {{bindAttr}} 助手。在你的模板中，尝试类似的东西:

<img {{bindAttr src="person.avatar"}}></img> 

你的头像属性是这样的:

avatar: function () {
  return 'img/people/%@'.fmt('Finck_Brian.jpg');
}.property()

这里有一个小的 jsfiddle 来说明:http://jsfiddle.net/Sly7/dWr8T/

现在回答你的问题，你有一个帮助程序返回一个安全的 html 字符串。我认为这应该像 'your string'.htmlSafe() 一样简单(事实上 Ember 用这个函数丰富了 String 原型(prototype)，参见 http://docs.emberjs.com/#doc=packages_ember-handlebars_lib_string.js&src=true