值未在模板字符串中更新

Question

嗨，我將fName，lName和position設置為空字符串，並希望在單擊按鈕后將其值更改並將該值保存到this.templates $ {this.fName}等。

showMessage方法應獲得點擊並更新值並注入模板。 除了更新值之外，一切都很好。 到達“ mP.innerHTML = _this.template;”時 行中的值與開始時設置的一樣為空。

奇怪的是，在“ mP.innerHTML = _this.template;”之前運行的console.log（_this.fName） 給出正確的點擊價值。

可能是什么問題呢？ 我該如何解決？

 class Message { constructor() { this.fName = ''; this.lName = ''; this.position = ''; this.bride = { fName: 'Anna', lName: 'Doe', position: 'bride' }; this.groom = { fName: 'John', lName: 'Doe', position: 'groom' }; this.template = /*html*/` <div class="message message-show"> <div class="message-close">x</div> <h1> My name is ${this.fName} ${this.lName}, ${this.position} </h1> </div>`; this.elements = function() { let messageButtons = document.querySelectorAll('.wed-couple-newlyweds-message'); let messagePopup = document.querySelector('.message-popup'); let messageClose = document.querySelector('.message-close'); let messageDiv = document.querySelector('.message'); return { messageButtons: messageButtons, messagePopup: messagePopup, messageClose: messageClose, messageDiv: messageDiv }; }; //Initiate Methods //End of Methods. } //declare methods // 1. show message on click. showMessage() { var _this = this; let els = new this.elements(); let mB = els.messageButtons; let mP = els.messagePopup; let mD = els.messageDiv; mB.forEach(function(message) { message.onclick = function() { if (message.classList.contains(`wed-couple-newlyweds-message-bride`)) { console.log('bride') _this.fName = _this.bride.fName _this.lName = _this.bride.lName _this.position = _this.bride.position console.log(_this.fName) mP.innerHTML = _this.template; } else { console.log('groom') _this.fName = _this.groom.fName _this.lName = _this.groom.lName _this.position = _this.groom.position console.log(_this.fName) mP.innerHTML = _this.template; } let mC = els.messageClose; _this.closeMessage(); } }); }; 

Answer 1

模板文字如

var foo = `Hello, ${name}`;

等效於：

var foo = "Hello, " + name;

---

它在解釋變量時取其值，並產生一個常規字符串。

它不會創建任何類型的類似於字符串的對象，該對象通過觀察內插變量的值來動態更新其值。

---

如果要使用變量的新值獲取新字符串，則需要重新運行代碼。

使其成為一個函數。