2

モデルから取得した値を使用して、オブジェクトに動的クラス名を作成したいと思います。キーの1つに、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"}} ？

4

1 に答える 1

2

これには適切な解決策になると以前に述べましたattributeBindingsが、私は間違っていました。指摘されているようclassに、特定のの属性をバインドするときは、またはを使用する必要があります。以下のサンプルを参照してください。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 に答える