Question

我想在一个对象上创建一个动态类名，其中包含我从模型中获取的值。其中一个键名为provider，其中包含“twitter”或“facebook”。我想要做的是将字符串“icon-”添加到提供者，以便生成的类为icon-twitter或icon-facebook。

这是我现在的代码。

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

Ember提供了一种在属性中包含静态字符串的方法，方法是在其前加:。你可以看到我在这个例子中还添加了一个名为avatar-icon的类。我已经尝试了:icon-account.provider，只是产生了文字字符串“icon-account.provider”。

RESPONSE 好一个。我正在研究类似于你现在的答案的解决方案。但问题是：此视图将在每个循环的上下文中使用。如何传递要在视图中使用的当前项？我现在有这个：

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

是否可以这样做：

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

Answer 1

我之前曾说过，attributeBindings对于此是合适的解决方案，但我错了。如上所述，在绑定给定class的{{1}}属性时，您应该使用View或classNames。请参考以下示例：

classNameBindings

这将呈现以下HTML：

App.ApplicationView = Em.View.extend({
    provider: 'Facebook',
    classNameBindings: 'providerClass',
    providerClass: function() {
        return 'icon-avatar icon-%@'.fmt(this.get('provider').toLowerCase());
    }.property('provider')
});

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

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

使用bindAttr创建动态字符串

1 个答案: