如何解决更改值并重新运行代码时,模板文字字符串不会更新
即使我重新运行代码,模板文字也不会更新。 我已注销该对象,该值确实在更改。
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>`;
}
},];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。