ember.js - 使用bindAttr创建动态字符串

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”。

回应 好一个。我正在研究与您现在的答案类似的解决方案。但问题是:这个 View 将在每个循环的上下文中使用。我如何传入要在 View 中使用的当前项目？我现在有这个:

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

是否可以这样做:

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

Answer 1

我之前曾说过 attributeBindings 是一个合适的解决方案，但我错了。正如所指出的，当绑定(bind)给定 View 的 class 属性时，您应该使用 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="ember212" class="ember-view icon-avatar icon-facebook">
    <h1>App</h1>    
</div>

这是一个 fiddle : http://jsfiddle.net/schawaska/HH9Sk/

(注意:fiddle 链接到早于 RC 的 Ember.js 版本)