2

我想在一个对象上创建一个动态类名，该类名具有我从模型中获得的值。其中一个键被命名provider，其中包含“twitter”或“facebook”。我想做的是在提供者前面加上字符串“icon-”，以便生成的类是icon-twitteror icon-facebook。

这是我现在得到的代码。

<i {{bindAttr class=":avatar-icon account.provider"}}></i>

Ember 提供了一种在属性中添加静态字符串的方法，方法是在属性前添加:。您可以看到我还在avatar-icon此示例中添加了一个名为的类。我已经尝试过:icon-account.provider，这只是导致了文字字符串“icon-account.provider”。

回复 不错。我正在研究与您的答案类似的解决方案。但问题是：这个视图将在每个循环的上下文中使用。我将如何传递要在视图中使用的当前项目？我现在有这个：

{{#each account in controller}} {{#view "Social.AccountButtonView"}} <i {{bindAttr class="account.provider"}}></i> {{/view}} {{/each}}

是否可以这样做：

{{#view "Social.AccountButtonView" account="account"}} ?

4

1 回答 1

2

我之前说过这attributeBindings将是一个合适的解决方案，但我错了。正如所指出的，在绑定class给定的属性时，您应该使用or 。请参考以下示例：ViewclassNamesclassNameBindings

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="ember212" class="ember-view icon-avatar icon-facebook">
    <h1>App</h1>    
</div>

这是一个小提琴：http: //jsfiddle.net/schawaska/HH9Sk/

（注意：小提琴链接到早于 RC 的 Ember.js 版本）

于 2013-02-25T21:46:53.710 回答