javascript - 等待 DOM 在 JSNI GWT 中加载

Question

我目前遇到一个问题，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 为 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);
    }
}

Answer 1

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

参见another answer of mine on best practices for creating and initializing widgets ，以供快速引用。

基本思想是重写小部件上的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
        }
    }
}