更改值并重新运行代码时，模板文字字符串不会更新

问题描述

即使我重新运行代码，模板文字也不会更新。 我已注销该对象，该值确实在更改。

let store = {
  txt: 1337,txt2: 1837
};

let pages = [
  {
    name: "page1",show: true,template: `
    <p>This is page1 ${store.txt}</p>
    <button onclick="reactiveChange(store.txt,1473)">Change store!</button>
    <button onclick="changePage('page2')">change page</button>
    `,},{
    name: "page2",show: false,template: `<p>This is page2 ${store.txt2}</p>
    <button onclick="reactiveChange(store.txt,6537)">Change store!</button>
    <button onclick="changePage('page1')">change page</button>
    `,];

let render = (() => {
  let app = document.getElementById("app");
  let check = pages.filter((page) => page.show === true).length === 0 ? false : true;
  if (!check) console.error("No page is set to true");
  else app.innerHTML = pages.filter((page) => page.show === true)[0].template;
});

window.onload = render

let reactiveChange = (from,to) => {
    from = to
    render()
}

let changePage = (pageName) => {
    pages.map(page => page.show = false)
    pages.filter(page => page.name === pageName)[0].show = true;
    render()
}

<script src="app.js"></script>
<div id="app"></div>

解决方法

模板字符串的值不会自动更新。它只是一个定义后的静态字符串。

但是你可以让它们成为 getter 函数，以便在你引用它们时更新它们：

let pages = [
  {
    name: "page1",show: true,get template() {
      return `<p>This is page1 ${store.txt}</p>
      <button onclick="reactiveChange(store.txt,1473)">Change store!</button>
      <button onclick="changePage('page2')">change page</button>`;
    }
  },{
    name: "page2",show: false,get template() {
      return `<p>This is page2 ${store.txt2}</p>
      <button onclick="reactiveChange(store.txt,6537)">Change store!</button>
      <button onclick="changePage('page1')">change page</button>`;
    }
  },];