避免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库之间的竞争条件

回答

相关问题