Question

Using:

• ember: v1.0.0-pre.4
• ember-data: revision 11
• handlebars: 1.0.rc2

So I have a template that I’ve hooked up to a controller that’s receiving info from an REST API. In just print out text, this is fine but these handlebar expression…

<img src="{{ imageUrl }}"/> 

…when inserted into the dom look like:

<img src="&lt;script id='metamorph-28-start' type='text/x-placeholder'&gt;&lt;/script&gt;http://asdf.com/image.jpg&lt;script id='metamorph-28-end' type='text/x-placeholder'&gt;&lt;/script&gt;">

I’m obviously very new to Ember.js and Handlebars.

I’ve tried doing searches for “rendering urls in ember templates” and “print out html in ember mustache templates.” Ack, probably obvious but I’m missing it.

Answer 1

try this:

<img {{bind-attr src="imageUrl"}} />

but you can have more than just one attribute like:

<img {{bind-attr src="imageUrl" alt="imageTitle"}}>

here is the doc: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_bind-attr

also, can be useful in some cases where you don’t need the variable to be bound, you could use:

<img src="{{unbound imageUrl}}" />

ref to the doc: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound

but the first method is usually the best.