使用:
所以我有一个模板,我已经连接到一个从RESTAPI接收信息的控制器上。在打印文本时,这很好,但是这些车把表达式…
<img src="{{ imageUrl }}"/>
…插入dom时看起来像:
<img src="<script id='metamorph-28-start' type='text/x-placeholder'></script>http://asdf.com/image.jpg<script id='metamorph-28-end' type='text/x-placeholder'></script>">
我显然对Ember. js和Handlebar非常陌生。
我尝试过搜索“在余烬模板中渲染网址”和“在余烬胡子模板中打印html”Ack,可能很明显,但我错过了它。
试试这个:
但是您可以拥有不止一个属性,例如:
这里是文档:http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_bind-attr
此外,在某些不需要绑定变量的情况下可能很有用,您可以使用:
参考文档:http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound
但第一种方法通常是最好的。
更进一步,让你的脚更湿,我们实际上可以创建一个代表图像的视图,并用它来添加更多功能。
例如,在下面的JSFiddle中,我将视图的tagName
设置为img
(其中默认值为div
),然后添加了属性绑定
以将属性绑定到视图。在我们的例子中,我们希望绑定到src
属性。然后我们需要做的就是将src
属性指定为视图的属性,并为其提供默认值——在本例中为Google。
因此,视图按预期工作:我们将图像显示为视图的一部分。
然而,更进一步,我们现在可以使用. set()
方法轻松更改图像的src
属性。在神奇的click
事件中,当用户单击DOM中的视图时调用该事件(通过单击JSFiddle中的Google徽标自己尝试一下!),src
属性从Google的徽标更改为Yahoo的徽标。由于我们从属性绑定
中观察到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');
}
});