问题描述
我想用我的模型获得的值在对象上创建一个动态类名。其中一个键名为 provider
,其中包含twitter或facebook。我想要做的是在提供程序中预先加上字符串icon-,以便得到的类是 icon-twitter
或 icon- facebook
。
这是我现在得到的代码。
< i {{bindAttr class =:avatar-icon account.provider}}>< / i>
Ember提供了一种通过预先加入来包含静态字符串的方法:
给它。在本例中,您可以看到我还添加了一个名为 avatar-icon
的类。我已经尝试过:图标account.provider
这只是导致文本字符串 图标account.provider
回复
很好。我正在研究类似于您的答案的解决方案。问题是:这个视图将在每个循环的上下文中使用。我将如何通过当前的项目在视图中使用?我现在有这个权利:
$ b $ {{#控制器中的每个帐户}}
{{#viewSocial .AccountButtonView}}
< i {{bindAttr class =account.provider}}>< / i>
{{/ view}}
{{/ each}}
只是这样做:
{{#view Social.AccountButtonView 帐户= 帐户}}
?
我之前已经说过 attributeBindings
会是一个合适的解决方案,但我错了。正如所指出的,当绑定给定 View
的类
属性时,应该使用 classNames
或 classNameBindings
。请参考下面的例子:
App.ApplicationView = Em.View.extend({
provider:'Facebook ',
classNameBindings:'providerClass',
providerClass:function(){
return'icon-avatar icon - %@'.fmt(this.get('provider')。toLowerCase ));
} .property('provider')
});
这会呈现以下HTML:
< div id =ember212class =ember-view icon-avatar icon-facebook>
< h1> App< / h1>
< / div>
这里的一个小提琴:
(注意:小提琴正在链接到RC之前的Ember.js版本)
I'd like to create a dynamic classname on an object with a value I'm getting from my model. One of the keys is named provider
which contains either "twitter" or "facebook". What I'd like to do is to prepend the string "icon-" to the provider so that the resulting class is icon-twitter
or icon-facebook
.
This is the code that I've got now.
<i {{bindAttr class=":avatar-icon account.provider"}}></i>
Ember offers a way to include a static string within the attribute by prepending :
to it. You can see that I'm also adding a class called avatar-icon
in this example. I've already tried :icon-account.provider
which simply resulted in the literal string "icon-account.provider".
RESPONSENice one. I'm working on a solution similar to your answer right now. Question though: this view will be used within the context of an each loop. How would I pass in the current item to be used within the view? I have this right now:
{{#each account in controller}} {{#view "Social.AccountButtonView"}} <i {{bindAttr class="account.provider"}}></i> {{/view}}{{/each}}
Is it possible to just do this:
{{#view "Social.AccountButtonView" account="account"}}
?
I have previously stated that attributeBindings
would be a suitable solution for this, but I was mistaken. When binding the class
attribute of a given View
, as pointed out, you should use classNames
or classNameBindings
. Please refer to the sample below:
App.ApplicationView = Em.View.extend({
provider: 'Facebook',
classNameBindings: 'providerClass',
providerClass: function() {
return 'icon-avatar icon-%@'.fmt(this.get('provider').toLowerCase());
}.property('provider')
});
This will render the following HTML:
<div id="ember212" class="ember-view icon-avatar icon-facebook">
<h1>App</h1>
</div>
Here's a fiddle: http://jsfiddle.net/schawaska/HH9Sk/
(Note: The fiddle is linking to a version of Ember.js earlier than RC)
这篇关于用bindAttr创建一个动态字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!