LitElement - 如果在LitElement render方法中使用表達式，如何使用javascript創建dom-if restamp行為？

Question

我們在LitElement中使用“if”表達式來選擇性地渲染render方法中的內容，並且每次“if”表達式被重新評估（更改）時都希望重新創建子DOM。 這類似於用於支持聚合物3中的“restamp”特性的dom-if元素。

真的很感激這里有任何指示嗎？

謝謝，維沙爾

Answer 1

您有2個選項，具體取決於條件是否會多次更改並且您是否要緩存所表示的部分：

沒有緩存（vanilla 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`
  )}`;
}

Answer 2

嘗試這個：

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