Блог

Главная - Вопросы по программированию - Строка литерала шаблона не обновляется при изменении значения и повторном запуске кода

Строка литерала шаблона не обновляется при изменении значения и повторном запуске кода

#javascript #template-literals

#javascript #литералы шаблона

Вопрос:

Литерал шаблона не обновляется даже после повторного запуска кода. Я вышел из объекта, и значение действительно меняется.

 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>

Комментарии:

1. Не добавляйте спам-текст в свой пост, чтобы обойти требование, в котором вас просят подробнее объяснить проблему — вместо этого, пожалуйста, объясните проблему более подробно .

2. Поскольку код, похоже, находится в теле скрипта, как именно вы его «перезапускаете»?

3. Функция визуализации вызывается после функций changePage и reactiveChange .

Ответ №1:

Значение строки шаблона не обновляется автоматически. Это просто статическая строка после ее определения.

Но вы можете сделать их функциями получения, чтобы они обновлялись всякий раз, когда вы ссылаетесь на них:

 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>`;
    }
  },
];