私は Ember-1.0.0-pre2 を使用していますが、{{bindAttr class="..."}} を持つ要素の周りに {{#if}} ステートメントを使用する際に問題が発生しているようで、バインディング条件は次のとおりです。同じ。つまり、if ステートメントとクラス バインディングは同じコントローラー属性です。コードを参照してください:
<button {{action "toggleShow" target="controller"}}>Toggle Visibility</button>
{{#if show}}
<div {{bindAttr class="show:red:green"}}>test</div>
{{/if}}
「Toggle Visibility」ボタンを数回クリックすると、次のような一般的なエラーが表示されることに気付くでしょう。回避可能であり、アプリケーションの重大なパフォーマンスの問題の原因となるため、この動作は非推奨です...」
一見ばかげているように見えますが、これは私の問題の非常に原始的な例です。私の場合、両方のバインディング (if および class 属性) の最後に計算されたプロパティがあります。どちらの場合も、計算されたプロパティは共通の従属キーを共有します。その共通の依存キーが変更されると、両方のヘルパーが更新されるため、エラーが発生します。
これはバグですか?ここで何が起こっているかは推測できますが、安全にこれを実行できるはずです。
編集: 上記は、 私が抱えている問題の原始的な例です。 これは、非常に単純な方法で表示することを目的としています。以下は、より複雑な例です。
テンプレート:
<button {{action "toggleValue" target="controller"}}>Toggle Value</button><br>
{{#if greaterThanTen}}
<div {{bindAttr class="isOdd:red:green"}}>test</div>
{{/if}}
Javascript:
App.myController = Ember.Controller.create({
value: 10,
greaterThanTen: function() {
return this.get('value') > 10;
}.property('value'),
isOdd: function() {
return this.get('value') % 2 === 1;
}.property('value'),
toggleValue: function() {
this.set('value', (this.get('isOdd') ? 10 : 11));
}
});