在 Ember.js 模板中，如何打印出 HTML 将使用的模型属性，例如用于图像的 src 或用于链接的 href答案

【问题标题】：In Ember.js templates, how does one print out model's property that will be use by HTML like the src for image or href for link在 Ember.js 模板中，如何打印出 HTML 将使用的模型属性，例如用于图像的 src 或用于链接的 href
【发布时间】：2013-01-29 19:04:15
【问题描述】：

使用：

ember：v1.0.0-pre.4
ember 数据：修订版 11
车把：1.0.rc2

所以我有一个模板，我已经连接到一个从 REST API 接收信息的控制器。在只是打印出文本，这很好，但这些车把表达......

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

...插入 dom 时的样子：

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

我显然对 Ember.js 和 Handlebars 很陌生。

我尝试过搜索“在 ember 模板中呈现 url”和“在 ember 胡子模板中打印 html”。 Ack，可能很明显，但我错过了。

【问题讨论】：

标签： ember.js handlebars.js

【解决方案1】：

试试这个：

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

但您可以拥有多个属性，例如：

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

这里是文档：http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_bind-attr

另外，在您不需要绑定变量的某些情况下可能很有用，您可以使用：

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

参考文档：http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound

但第一种方法通常是最好的。

【讨论】：

老实说，我错过了文档中的 bindAttr 真是令人尴尬。

【解决方案2】：

再进一步让你的脚更湿，我们实际上可以创建一个表示图像的视图，并使用它来添加更多功能。

例如，in the following JSFiddle 我已将视图的tagName 设置为img（其中默认为div），然后添加了attributeBindings 以将属性绑定到视图。在我们的例子中，我们想要绑定到src 属性。然后我们需要做的就是将src 属性指定为视图的一个属性，并给它一个默认值——在这个例子中是Google。

因此视图按预期工作：我们已将图像显示为视图的一部分。

不过，更进一步，我们现在可以使用.set() 方法轻松更改图像的src 属性。在神奇的click 事件中，当用户单击 DOM 中的视图时调用（通过单击 JSFiddle 中的 Google 徽标亲自尝试！），src 属性从 Google 的徽标更改为 Yahoo 的徽标。由于我们正在观察来自attributeBindings 的src 属性，因此我们一调用就会更新：

this.set('src', 'http://l.yimg.com/dh/ap/default/120910/yahoo_logo_br.png');

JSFiddle 消失时的完整代码：

App.ImageView = Ember.View.extend({
    tagName: 'img',
    attributeBindings: ['src'],
    src: 'https://www.google.com/images/srpr/logo3w.png',
    click: function() {
        this.set('src', 'http://l.yimg.com/dh/ap/default/120910/yahoo_logo_br.png'); 
    }
});

【讨论】：