Question

我在少数几个地方遇到过这个问题，但最近这是Highcharts的一个问题。我有一个带有三个div的布局，称为#leftdiv，＃maindiv和#rightdiv。 #maindiv中有一张highcharts图表。单击按钮可以隐藏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。

然而，当我的重绘图函数观察到showLeft时，它的行为是不可预测的，因为在观察者触发后属性可能会更新并传播通过DOM。

Ember中是否有一些常规构造允许我避免这个问题？这是一种需要明确构建runloop的情况，并且有规范的方法吗？

谢谢，

- 亚光

Answer 1

您可以尝试观察View中的值，调用rerender()，然后使用didInsertElement来重新绘制Highchart

e.g。

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 */
    }
});

避免Ember.js和其他js库之间的竞争条件

1 个答案: