如何从动态属性将IMG插入DOM

How do I insert the IMG into the DOM from a dynamic property?

本文关键字：IMG 插入 DOM 属性 动态      更新时间：2023-09-26

我的视图中有以下属性：

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

实际上，我所要做的就是使用标准的{{ person.avatar }}标记将返回的元素插入到DOM中。然而，我得到的只是以下内容：

[对象HTMLImageElement]

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

我认为使用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字符串。我认为这应该像"yourstring"一样简单。htmlSafe（）（事实上，Ember用这个函数丰富了string原型，请参阅http://docs.emberjs.com/#doc=packages_ember-handlers_lib_string.js&src=真实

您使用的模板语言需要一个HTML字符串，而不是HTML元素对象。

您可以使用将HTML元素对象转换为HTML字符串

 var container = document.createElement('div');
 container.appendChild(desired_element);
 return container.innerHTML;
相关文章：