lit-element - LitElement - 如果在 LitElement 渲染方法中的表达式，如何使用 javascript 创建 dom-if 重新标记行为？

Question

我们在 LitElement 中使用“if”表达式在 render 方法中选择性地渲染内容，并且希望在每次“if”表达式重新评估（更改）时重新创建子 DOM。这类似于 dom-if 元素用于支持聚合物 3 中的“重新印章”属性的东西。

真的很感激这里的任何指示吗？

谢谢， 维沙尔

Answer 1

尝试这个：

    render() {
      return html`${
        condition ? html`<p>Hello</p>` : ''
      }`;
    }

Answer 2

您有 2 个选项，具体取决于条件是否会多次更改以及是否要缓存表示的部分：

没有缓存（香草javascript）

render() {
  return html`${
    condition ?
    () => html`Your TRUE HTML here` :
    () => html`Your FALSE HTML here`
  }`;
}

使用缓存（使用 lit-html 中的缓存指令）

import { cache } from 'lit-html/directives/cache';
[…]
render() {
  return html`${cache(
    condition ?
    () => html`Your TRUE HTML here` :
    () => html`Your FALSE HTML here`
  )}`;
}