用bindAttr創建一個動態字符串

我想用我的模型獲得的值在對象上創建一個動態類名。其中一個密鑰名爲provider，其中包含「twitter」或「facebook」。我想要做的是在提供程序中預先輸入字符串「icon-」，以便生成的類爲icon-twitter或icon-facebook。用bindAttr創建一個動態字符串

這是我現在得到的代碼。

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

灰燼提供了一種方法通過預先:它包含屬性中的靜態字符串。在這個例子中，你可以看到我還添加了一個名爲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"}} ？

來源

2013-02-25 commadelimited

我相信你必須做一些類似於{{#view「Social.AccountButtonView」accountBinding =「account」}} ... {{/ view}}'。我相信在這種情況下，'account'將會超出子視圖範圍內的範圍，所以在視圖內，您可以將其稱爲'view.account' – MilkyWayJoe 2013-02-26 00:16:24

我之前已經說過attributeBindings會是一個合適的解決方案，但我錯了。正如指出的那樣，當綁定給定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>

這裏有一個小提琴：http://jsfiddle.net/schawaska/HH9Sk/

（注：小提琴被鏈接到一個版本Ember.js早於RC）

來源

2013-02-25 21:46:53 MilkyWayJoe

您不應該使用'attributeBindings'做廣告，您應該只需使用'classNameBindings'。我擔心他們會經常發生衝突。 – ebryn 2013-02-25 23:47:30

@ebryn你能解釋一下嗎？誠實的問題：當你說他們會經常發生衝突時，你的意思是什麼？ – MilkyWayJoe 2013-02-25 23:59:02

如果你想更新'class'屬性，你應該使用'Ember.View'中公開的'classNames'或'classNameBindings'屬性。我相信當這些功能已經存在時，使用'attributeBindings：['class']'是一個壞主意。 – ebryn 2013-02-26 00:03:35

用bindAttr創建一個動態字符串

回答

相關問題