Как создать dom-if restmp поведение с javascript, если выражение внутри метода рендеринга LitElement?

Question

Мы используем выражение «если» внутри LitElement для выборочной визуализации содержимого в методе рендеринга и хотели бы заново создавать дочерний DOM каждый раз, когда выражение «if» подвергается переоценке (изменениям). Это похоже на то, что элемент dom-if использовал для поддержки свойства «restmp» в полимере 3.

Действительно признателен за любые указания, чтобы следовать?

Спасибо, Вишал

Answer 1

У вас есть 2 варианта в зависимости от того, будет ли условие изменяться несколько раз, и вы хотите кэшировать представленные части или нет:

Без кеша (ванильный JavaScript)

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

С кешем (с использованием директивы cache из lit-html)

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