0

我正在使用GWT 2.8.2版和gwt-polymer-elements 1.7.0.0版来创建我的应用程序。我需要具有可切换内容的选项卡，这些选项卡可以在同一页面上多次同时出现。我尝试通过结合使用 PaperTabs 和 IronPages 来实现这一点。

我添加了自定义 UiBinder。

<i:IronPages ui:field="ironPages"></i:IronPages>    
<p:PaperTabs ui:field="paperTabs" scrollable="true"></p:PaperTabs>

我将 div 动态添加到 ironPages：

替换ironPages.add(new HTML("<div>" + outerBox + "</div>"));为：

SafeHtmlBuilder outerBoxBuilder = new SafeHtmlBuilder();

outerBoxBuilder.appendHtmlConstant("<div>")
.append(SafeHtmlUtils.fromTrustedString(outerBox.toString()))
.appendHtmlConstant("</div>");

ironPages.add(new HTML(outerBoxBuilder.toSafeHtml()));

其中每个外框定义如下：

for(int i: total){
    PaperMaterial outerBox = new PaperMaterial();
    HTML boxTitle = new HTML("<h2>Some title</h2>");
    outerBox.add(boxTitle);

    PaperMaterial innerBox = new PaperMaterial();
    PaperCheckbox checkBox = new PaperCheckbox();
    // checkBox.getElement().setInnerText("label");
    checkBox.getElement().setInnerSafeHtml(
        new SafeHtmlBuilder().appendEscaped("label").toSafeHtml()
    );

    innerBox.add(checkBox);
    outerBox.add(innerBox);
}

类似地生成新的纸张标签：

PaperTab singleTab = new PaperTab();
// singleTab.getElement().setInnerHTML("some text");
singleTab.getElement().setInnerSafeHtml(
    new SafeHtmlBuilder().appendEscaped("some text").toSafeHtml()
);
singleTab.getElement().setAttribute("q", pageNumber);
paperTabs.add(singleTab);

处理程序

@UiHandler("paperTabs")
void tabSelected(IronSelectEvent event) {
    PaperTabElement tab = Js.cast(event.getItem());
    ironPages.setSelected(tab.getAttribute("q"));
}

它在第一次加载页面时起作用。当我在不同页面之间导航时，复合小部件会失去其功能。单击 ironPages 中的 paperTab 或复选框时，它们就会消失。似乎小部件正在被清除并丢失所有子元素。

有没有人有什么建议？有什么我想念的吗？

4

0 回答 0