Как вставить view (child) в div родительского макета?Ваадин 10 / Поток - PullRequest
Новая
       6

Как вставить view (child) в div родительского макета?Ваадин 10 / Поток

0 голосов
/ 26 июня 2018

У меня есть компонент, реализующий 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>

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

В документации vaadin сказано следующее:

Дочерние компоненты к шаблонам можно добавлять с помощью API Component или Element, но поскольку PolymerTemplate использует теневой DOM дерево теней визуализируется вместо элементов потомков , которые находятся в светлом DOM.

Это означает, что шаблон должен иметь <slot></slot>, чтобы отметить место, где светлые элементы DOM должнырендеринг.

Я нашел решение для этого составного макета:

Мне нужно было только изменить мой шаблон side-menu.html и добавить *Тег 1020 * выглядит так: 

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

И затем, когда мое представление загружается, оно отображается в теге <slot> в шаблоне

0 голосов
/ 26 июня 2018

Проблема в вашем случае заключается в том, что, поскольку у вас есть пустой шаблон без функциональности и привязки данных, а также пользовательская модель шаблона, серверная часть не знает о его содержимом.Таким образом, 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

...