用bindAttr创建一个动态字符串 [英] Creating a dynamic string with bindAttr

问题描述

我想用我的模型获得的值在对象上创建一个动态类名。其中一个键名为 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> 
  

这里的一个小提琴：<强> http://jsfiddle.net/schawaska/HH9Sk/

（注意：小提琴正在链接到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".

RESPONSE Nice 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创建一个动态字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！