使用 lit-element 渲染多个页面之一

Question

lit-element 文档通过 (condition ? a : b) 描述了条件渲染。我想知道如何使用它来呈现多个页面之一，f.e。结合来自 Google material 网络组件的 mwc-tab-bar。

我目前的解决方案是这样的：

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

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

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

    ... further pages ... 
}

我不喜欢 :html`` 部分，但这就是它的本意吗？

Answer 1

有多种方法可以实现这一点，您的解决方案是一种，但正如您提到的，它不是最漂亮的

一种可以将其模块化的方法是使用 object/array 和渲染函数，基本上这个想法是这样的：

首先，为每个页面定义渲染函数（这可以在同一个文件或不同文件上）：

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)}
  `;
}

这基本上会调用与所选页面匹配的呈现函数，并将其发送到主要 Web 组件的引用，以便您可以访问其属性。

话又说回来，这种方法也有它的缺陷，如果你需要你的子模板很复杂，我真的不会推荐它。

在那种情况下，您最好为每个视图创建其他组件，而不是渲染函数，这样您还可以进行一些延迟加载等。

对于这种方法，您可能需要查看像 vaadin router 这样的路由器，它可以帮助您进行路由并相应地更改要显示的组件

Answer 2

像这样使用更简单的代码。

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>`;
    }
}

使用 lit-element 渲染多个页面之一

Rendering one of multiple pages with lit-element

lit-element

像这样使用更简单的代码。