0

Tengo un componente que implementa RouterLayout de esta manera:

@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));

    }
}

Dirijo una vista secundaria del diseño principal:

@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"));
    }

}

Pero el resultado sobreescribe todo el contenido del archivo side-menu.html

Formato base del modelo side-menu.html

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <div id=contenido><!-- Es aqui donde quiero mostrar mi vista view Icons --></div>
</side-menu>

Pero el resultado es esto:

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

El resultado esperado, debe ser algo así:

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

1 respuesta 1

0

En la documentación de vaadin dice esto:

You can add child components to templates using the Component or Element API, but because PolymerTemplate uses the shadow DOM the shadow tree is rendered instead of the elements children that are in the light DOM.

This means that the template needs to have a <slot></slot> to mark the place where the light DOM elements should be rendered.

Que resumiendo un poco al español sería algo como:

Puedes agregar componentes hijos a los modelos utilizando el API de Componentes o Elementos. Pero como la interface PolymerTemplate usa el shadowDOM (el árbol shadowDOM se dibuja en vez de los elementos hijos) el cual esta en el lightDOM

Esto quiere decir que se necesita agregar el tag para marcar/indicar el lugar donde el lightDOM debe dibujar los elementos

Encontré una solución para este diseño compuesto:

Solo necesitaba modificar el modelo side-menu.html y agregar el tag <slot> de esta manera:

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

Y luego la vista cuando se carga, es dibujada dentro del tag <slot> definido en el modelo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.