2

私はこの問題をいくつかの場所で抱えていますが、最近ではHighchartsの問題です。私は3つのdivを持つレイアウトを持っており、それらを＃leftdiv、＃maindiv、および#rightdivと呼びます。#maindivにハイチャートチャートがあります。ボタンをクリックすると、leftdivとrightdivを非表示にできます。

現在、leftdivのボタンをクリックすると、showLeftというプロパティをfalseに設定するアクションハンドラーが呼び出されます。divのクラスは、次のように、showLeftに基づいてコンピュータープロパティにバインドされます。

leftClass: function() {
    if (this.get('showLeft')) {
        return "span3"
    } else {
        return "span0" 
    }
}.property('showLeft')

と

mainClass: function() {
    if (this.get('showLeft') && this.get('showRight')) {
        return "span6"
    } else if (this.get('showLeft') || this.get('showRight')) {
        return "span9" 
    } else {
        return "span11"
    }
}.property('showLeft', 'showRight'),

これは、左側のバーを非表示にするために機能します。ただし、maindivのサイズが変更されたら、新しいdivに合わせてhighchartsチャートを再描画する必要があります。

ただし、再描画チャート関数がshowLeftを監視すると、オブザーバーが起動した後にプロパティが更新されてDOMを介して伝播する可能性があるため、予期しない動作をします。

この問題を回避するための一般的な構成はEmberにありますか？これは、明示的にランループを構築することが求められている状況であり、それを行うための標準的な方法はありますか？

ありがとう、

-マット

4

1 に答える 1

2

からの値を観察しView、 を呼び出し、ハイチャートの再描画を処理するためrerender()に使用することができます。didInsertElement

例えば

App.MyController = Ember.Controller.extend({
    ...
});
App.MyView = Ember.View.extend({
    templateName: 'whatever-template',
    resize_observer: (function() {
         this.rerender();
    }).observes('controller.showLeft', 'controller.showRight'),
    didInsertElement: function() {
        /* Refresh your charts here */
    }
});
于 2013-02-23T01:48:35.507 に答える