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

Question

lit-element 文档描述了通过 (condition ? a : b) 进行的条件渲染。我想知道如何使用它来呈现多个页面之一，f.e.结合来自 Google 材料 Web 组件的 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

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

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

Answer 2

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

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

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

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 这样的路由器，它可以帮助您路由和更改相应显示的组件