提问者:小点点

在Ember. js模板中,如何打印出模型的属性,这些属性将被超文本标记语言使用,例如用于图像的src或用于链接的href


使用:

  • 余烬:v1.0.0-pre4
  • enpe-data:修订版11
  • 车把:1.0. rc2

所以我有一个模板,我已经连接到一个从RESTAPI接收信息的控制器上。在打印文本时,这很好,但是这些车把表达式…

<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和Handlebar非常陌生。

我尝试过搜索“在余烬模板中渲染网址”和“在余烬胡子模板中打印html”Ack,可能很明显,但我错过了它。


共2个答案

匿名用户

试试这个:

但是您可以拥有不止一个属性,例如:

这里是文档: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'); 
    }
});