3

我有一个像这样实现RouterLayout的组件：

@Tag("side-menu")
@HtmlImport(value = "src/components/side-menu.html")
public class SideMenu extends PolymerTemplate<TemplateModel> implements RouterLayout {

    @Id("menu")
    private PaperListBox listBox = new PaperListBox();

    public SideMenu() {

        listBox.addMenu(new PaperItem("tutorial", TutorialView.class));
        listBox.addMenu(new PaperItem("icons", IconsView.class));

    }
}

我路由父布局的视图子

@Route(value=IconsView.VIEW_ROUTE, layout = SideMenu.class)
public class IconsView extends Div {

    public static final String VIEW_ROUTE = "icons";

    public IconsView() {
        add(new Label("ICONS VIEW"));
    }

}

但结果覆盖了side-menu.html文件的所有内容。

side-menu.html模板基本格式

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <div id=contenido><!-- I want to show here my view Icons --></div>
</side-menu>

但结果是

<side-menu>
    <div>
       <label>ICONOS VIEW</label>
    </div>
</side-menu>

预期结果是：

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <div id=contenido>
       <div>
          <label>ICONOS VIEW</label>
        </div>
    </div>
</side-menu>
4

2 回答 2

1

在vaadin 文档中这样说：

Component您可以使用或 API将子组件添加到模板Element，但由于 PolymerTemplate 使用阴影 DOM ，所以会渲染阴影树而不是light DOM 中的子元素。

这意味着模板需要有一个<slot></slot>来标记应该渲染轻量级 DOM 元素的位置。

我找到了这个复合布局的解决方案：

我只需要修改我的模板side-menu.html并添加<slot>如下标签：

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <slot></slot>
</side-menu>

然后当我的视图被加载时，它被渲染到<slot>模板中的标签中

于 2018-06-27T13:55:52.870 回答
0

您的问题是，由于您拥有没有功能和数据绑定和自定义模板模型的裸模板，因此服务器端不知道其内容。因此 Div.add() 将其视为空 div 并覆盖其内容。

在您的情况下，一种方法是通过 Element API 修改内容，可能类似于：

public IconsView() {
    label = new Label("ICONS VIEW");
    getElement().appendChild(label.getElement());
}

参见 API 规范

https://demo.vaadin.com/javadoc/com.vaadin/vaadin-core/10.0.0.rc5/com/vaadin/flow/dom/Node.html#appendChild-com.vaadin.flow.dom.Element。 ..-

另一种方法是将 html 模板扩展为功能齐全的聚合物元素

有关于此的更多信息，例如：

https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-list-bindings.html

于 2018-06-26T06:07:47.923 回答