Отрисовка одной из нескольких страниц с помощью lit-element - PullRequest
Новая
       23

Отрисовка одной из нескольких страниц с помощью lit-element

0 голосов
/ 09 июля 2020

В документации по световым элементам описывается условный рендеринг через (условие? A: b). Мне было интересно, как использовать это для рендеринга одной из нескольких страниц, например, в сочетании с mw c -tab-bar из веб-компонентов материалов Googles.

Мое текущее решение выглядит примерно так: 

render() {
    ... other stuff ...

    ${this.selectedPage === 0 ? html`
    <div>
        ...
    </div>
    ` : html``} 

    ${this.selectedPage === 1 ? html`
    <div>
        ...
    </div>            
    ` : html``}     

    ... further pages ... 
}

Мне не нравится часть: html``, но так ли это должно быть?

Ответы [ 2 ]

2 голосов
/ 09 июля 2020

Используйте более простой код вроде этого. 

constructor(){
    super();
    // don't forget add `prop` and `selectedPage` to `static get properties()`
    this.prop = 1;
}
render() {
    return this.getPage(this.selectedPage);
}

getPage(num){
    switch(num){
        default:
        case 1:
            return html`<div>P${this.prop}<div>`;
        case 2:
            return html`<div>P2<div>`;
    }
}
1 голос
/ 09 июля 2020

Есть несколько способов добиться этого, ваше решение одно, но, как вы упомянули, оно не самое красивое.

Один из способов модульного построения - это использование объекта / массива и функций рендеринга, в основном идея такова:

Сначала определите функции рендеринга для каждой страницы (это может быть в том же файле или в разных файлах): 

const page0Renderer = (context) => {
  return html`<section>${context.someData}</section>`;
};

Затем вы можете определить объект, который имеет совпадение идентификаторов страниц и их соответствующих функций, вы используете числа, поэтому в приведенном ниже примере используются числа: 

const pageRenderers = {
  '0': page0Renderer,
  '1': page1Renderer,
  '2': page2Renderer,
// etc
};

И в вашей основной функции рендеринга вы можете использовать все это следующим образом: 

render() {
  return html`
    ${pageRenderers[`${this.selectedPage}`](this)}
  `;
}

Это, по сути, вызовет функцию рендеринга, которая соответствует выбранной странице, и отправит ей ссылку на основной веб-компонент, чтобы вы могли получить доступ к его свойствам. 1023 *, и я бы не особо рекомендовал его, если вам нужно, чтобы ваши дочерние шаблоны были сложными.

В этом случае вместо повторного ndering, вам, вероятно, будет лучше создать другие компоненты для каждого представления, и таким образом вы также можете выполнить некоторую отложенную загрузку и т. д.

Для такого подхода вы можете проверить маршрутизаторы, такие как маршрутизатор vaadin , который поможет вам как с маршрутизацией, так и с изменением того, какой компонент отображается соответственно

...