Question

I have the following property in my view:

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

And essentially all I’m trying to do is insert the returned element into the DOM, using the standard {{ person.avatar }} mark-up. However, all I get is the following:

[object HTMLImageElement]

I’m sure there was a way in EmberJS to unescape the characters that are returned, because it converts the HTML to a safe string. Something like unescape?

Answer 1

I think the most simple with ember is to use the {{bindAttr}} helper.
In your template, try something like:

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

and your avatar property like this:

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

Here is a small jsfiddle to illustrate: http://jsfiddle.net/Sly7/dWr8T/

Now to answer to your question, you have an helper to return a safe html string. I think this should be as simple as ‘your string’.htmlSafe() (In fact Ember enriches the String prototype with this function, see http://docs.emberjs.com/#doc=packages_ember-handlebars_lib_string.js&src=true