2

我目前遇到的问题是 javascript 似乎在 DOM 完全加载之前正在执行。我为什么这么说？采取以下代码：

var $r = $wnd.Raphael("container", 640, 480);

// Creates pie chart at with center at 320, 200,
// radius 100 and data: [55, 20, 13, 32, 5, 1, 2]
$r.piechart(320, 240, 100, [ 55, 20, 13, 32, 5, 1, 2 ]);

返回一个 Javascript 异常：'f is null'。这似乎表明无法识别容器名称。

如果指定绝对坐标，则饼图呈现良好。如果我在 Chrome 控制台中使用之前的代码（毕竟加载后），它会有效地将饼图加载到容器标签中。

我尝试将代码块包装在 JQuery 调用中：

$wnd.jQuery(function($) {
            // Creates canvas 640 × 480 at 10, 50
            var $r = $wnd.Raphael("container", 640, 480);
            // Creates pie chart at with center at 320, 200,
            // radius 100 and data: [55, 20, 13, 32, 5, 1, 2]
            $r.piechart(320, 240, 100, [ 55, 20, 13, 32, 5, 1, 2 ]);
    });

...而且没有骰子。

我可以尝试什么的任何想法？

编辑：

这是我调用 JSNI 方法的方式/位置。以下是相关的View代码。

public class WidgetSamplerView extends AbstractPanelView implements
                WidgetSamplerPresenter.Display { 

private FlexTable mainPanel;

public WidgetSamplerView() {
        super();

            mainPanel = new FlexTable();

            HTML container = new HTML();
        container.getElement().setAttribute("style",
                "width:700px;height:700px");
        container.getElement().setId("container");

        mainPanel.setWidget(0, 1, container);

        MyRaphaelWrapper.pieChart(); // JSNI Call

        setWidget(mainPanel);
    }
}
4

2 回答 2

2

您必须确保仅在onLoad()激活时调用 JSNI 方法，以验证小部件已加载。

请参阅我的另一个关于创建和初始化小部件的最佳实践的答案，以供快速参考。

基本思想是覆盖onLoad()小部件并在那里调用任何加载功能：

public class MainPanel extends FlexTable {

    private Element container;

    public MainPanel() {

        container = DOM.createDiv();
        container.setId("container");

        // this is required by the Widget API to define the underlying element
        setElement(container);
    }

    @Override
    protected void onLoad() {
        super.onLoad();

            MyRaphaelWrapper.pieChart(); // JSNI Call
        }
    }
}
于 2012-05-28T13:32:09.863 回答
1

我怀疑 Raphael 在内部做了以下事情：

document.getElementById("container");

如果您使用标准设置编译 GWT 应用程序，则代码将加载到 iframe 中。这就是为什么你必须使用 $wnd 而不是 window 和 $doc 而不是 document。他们指向主窗口。

你是如何包含其他 javascript 库的？因为 Raphael 可能正在查看错误的 DOM（iframe 的 dom）。你能用这样的方法将元素直接传递给 rapahel 吗？

var c = $doc.getElementById("container");
$wnd.Raphael(c, ..);
于 2012-05-25T21:52:28.440 回答