避免Ember.js和其他js庫之間的競爭條件

我在少數幾個地方遇到過這個問題，但最近這是Highcharts的問題。我有三個div的佈局，稱他們爲#leftdiv，#maindiv和#rightdiv。 #maindiv中有一張高圖表。 leftdiv和rightdiv可以隱藏我點擊一個按鈕。避免Ember.js和其他js庫之間的競爭條件

現在，單擊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。

但是，當我的重繪圖函數觀察showLeft時，它的行爲不可預知，因爲在觀察者觸發後，屬性可能會更新並通過DOM傳播。

Ember中是否有一些通用構造允許我避免此問題？這是一個需要明確構建runloop的情況嗎？是否有一種規範的方式來實現？

感謝，

--Matt

來源

2013-02-11 mg2

你試過Ember.run.next了嗎？ – pjlammertyn 2013-02-11 20:39:00

我做過了 - 它似乎仍然發生在渲染隊列之前 – mg2 2013-02-12 16:08:32

你可以嘗試從View觀察值，調用rerender()，並使用didInsertElement處理重繪Highchart

例如

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-23 01:48:35 wmarbut

避免Ember.js和其他js庫之間的競爭條件

回答

相關問題