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;

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

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

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

将其变成一个功能。

值不会在模板字符串中更新

1 个答案: