3

私は 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}}

http://jsfiddle.net/y49ch/10/

「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));
  }
});

http://jsfiddle.net/y49ch/16/

4

1 に答える 1

1

私は今それを見ます。元のコードには、同じプロパティを監視する両方のポイントがあり、少し混乱しましたが、今ではより理にかなっています。何が起こっているのかはよくわかりませんが、ランループと関係があるのではないかと思います。

div が子ビューになるように、コードを少し変更しました (このjsfiddleを参照)。あなたのプロパティのいくつかはコントローラからビューに移動されました(あなたの仕様では、これらの人がビューにいることを許可していますか、それともコントローラにいる必要がありますか?ビューだけが気にする必要がある何かを見逃していない限りisOddtoggleValueこの時点で) CSS は、親ビューにバインドされているプロパティをclassNameBindings監視することでバインドされます。value

App.myController = Ember.Controller.create({
  value: 10,

  greaterThanTen: function() {
    return this.get('value') > 10;
  }.property('value') 

});

App.MyView = Ember.View.extend({
    templateName: 'my-view',
    valueBinding: 'controller.value', 
    toggleValue: function() {
        this.set('value', (this.get('isOdd') ? 10 : 11));
    },
    isOdd: function() {
         return this.get('value') % 2 === 1;
    }.property('value'),
    ChildView: Em.View.extend({
        classNameBindings: 'parentView.isOdd:red:green'        
    })
});

テンプレートは次のようになります。

<script type="text/x-handlebars" data-template-name="my-view">
  <button {{action "toggleValue"}}>Toggle Value</button><br>
  {{#if greaterThanTen}}
    {{#view view.ChildView}}
       test
    {{/view}}
  {{/if}}
</script>

View のデフォルト タグは div であるため、同じ html をレンダリングし、完全に別のビューとして機能し、不要な再レンダリングを防ぎます。

編集: 概念の証明として、トグルではなく値に追加するボタンを追加したので、実際に色が表示された後に変化するのを確認できます。これがフィドルです

これがあなたにとって良いかどうか教えてください

于 2012-11-14T14:57:02.730 に答える