2

我在少数地方遇到了这个问题，但最近它是 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 的大小发生变化，我需要重新绘制 highcharts 图表以适应新的 div。

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

Ember 中是否有一些通用结构可以让我避免这个问题？这是需要明确构建运行循环的情况吗？是否有规范的方法来做到这一点？

谢谢，

——马特

4

1 回答 1

2

您可以尝试观察来自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-23T01:48:35.507 回答