lit html:如何重新渲染

Question

我正在尝试有一个菜单，多个选项渲染单击，但也有可能返回到菜单上的后退按钮。

我做错了什么，或者这是不可能的，我可能没有掌握渲染和it -html的概念，但我不能在第一次渲染后回到菜单，我需要它来使菜单动态。任何帮助都是受欢迎的，这是一个很好的菜单或其他选项。

谢谢

{% load static %}
{% load met_list_tags %}
{% load i18n %}
<script type="module">

  import {html, render} from 'https://unpkg.com/lit-html?module';

  const flapSupport = () => html`
  {% include 'flap-support.html' %}
  `;

  const flapContactSupport = () => html`
  <button type="button" class="backToSup" name="button">Back</button>
  {% include 'flap-contact-support.html' %}
  `;

  const flapFaq = () => html`
  <button type="button" class="backToSup" name="button">Back</button>
  {% include 'flap-faq.html' %}
  `;

  render(flapSupport(), document.getElementById("supportFlap"))

  $(document).ready(function() {
    $(".openContact").on("click", function(){
      render(flapContactSupport(), document.getElementById("supportFlap"));
    })
    $(".openFaq").on("click", function(){
      render(flapFaq(), document.getElementById("supportFlap"));
    })
    $("#backToSup").on("click", function(){
      render(flapSupport(), document.getElementById("supportFlap"));
    })
  });
</script>
<div id="supportFlap"></div>

我的support.html文件

{% load static %}
{% load met_list_tags %}
{% load i18n %}

<div class="circle-side-content" style="padding-top:1vh;">
  <button type="button" name="button" class="openContact">1</button>
  <button type="button" name="button" class="openFaq">2</button>
</div>

我的翻盖-support.html

Answer 1

找到了答案：

{% load static %}
{% load met_list_tags %}
{% load i18n %}
<script type="module">

  import {html, render} from 'https://unpkg.com/lit-html?module';

  const flapSupport = () => html`
  <div class="flap-list" style="padding-top:1vh;display:flex;">
    <button @click=${openContact} type="button" name="button" class="list-btn meetbtn">CONTACT <i class="fas fa-chevron-right"></i></button>
    <button @click=${openFaq} type="button" name="button" class="list-btn meetbtn">FAQ <i class="fas fa-chevron-right"></i></button>
  </div>
  `;

  const flapContactSupport = () => html`
  <div class="title-flap-section">
    <button @click=${backToSup} type="button" name="button"><i class="fas fa-arrow-left"></i> Back</button>
    <h2>Contact</h2>
  </div>
  {% include 'flap-contact-support.html' %}
  `;

  const flapFaq = () => html`
  <div class="title-flap-section">
    <button @click=${backToSup} type="button" name="button"><i class="fas fa-arrow-left"></i> Back</button>
    <h2>FAQ</h2>
  </div>
  {% include 'flap-faq.html' %}
  `;



  const backToSup = {
    handleEvent(e) {
      render(flapSupport(), document.getElementById("supportFlap"))
    },
  };

  const openContact = {
    handleEvent(e) {
      render(flapContactSupport(), document.getElementById("supportFlap"))
    },
  };

  const openFaq = {
    handleEvent(e) {
      render(flapFaq(), document.getElementById("supportFlap"))
    },
  };

  $(document).ready(function() {
    render(flapSupport(), document.getElementById("supportFlap"))
  });
</script>
<div id="supportFlap"></div>

这让我可以创建一个带有后退按钮的菜单，以与手机相同的方式导航。