11

使用：

  • 余烬：v1.0.0-pre.4
  • 余烬数据：修订版 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 mustache 模板中打印 html”。确认，可能很明显，但我错过了。

4

2 回答 2

29

尝试这个：

<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

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

于 2013-01-29T19:11:56.503 回答
2

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

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

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

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

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'); 
    }
});
于 2013-01-29T19:50:11.200 回答