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

Question

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

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>

Answer 1

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

但您可以使它们 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>`;
    }
  },
];

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

Template literal string doesn't update when changing value and rerunning the code

javascript

template-literals