javascript - 模板字符串中的值未更新

Question

你好，我将 fName、lName 和position 设置为空字符串，我希望在单击按钮后更改它们的值并将该值保存到 this.templates ${this.fName} 等。

showMessage 方法应该接收点击并更新值并注入(inject)模板。除了更新值之外，一切都很好。当到达“mP.innerHTML = _this.template;”时行的值与开始时设置的一样为空。

奇怪的是，console.log(_this.fName) 在“mP.innerHTML = _this.template;”之前运行单击时给出正确的值。

可能是什么问题？我该如何解决这个问题？

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;

<小时/>

它在解释时获取变量的值并生成一个常规字符串。

它不会创建任何类型的类似字符串的对象，该对象通过观察插值变量的值来动态更新其值。

<小时/>

如果您想使用变量的新值获取新字符串，则需要重新运行代码。

将其变成一个函数。