テンプレート文字列で値が更新されない

Question

こんにちは、 私はfName、lName、および位置を空の文字列に設定しています。ボタンをクリックしてその値を変更し、この値を保存する必要があります。テンプレート$ {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; 

---

変数が解釈されるときに変数の値をとり、通常の文字列を生成します。

補間された変数の値を見て、その値を動的に更新する文字列のようなオブジェクトは作成しません。

---

変数の新しい値を使用して新しい文字列を取得する場合は、コードを再実行する必要があります。

これを関数にします。