如何在 JavaScript 的构造函数中使用模板文字

Question

我正在构建一个待办事项列表应用程序，并有一个关于 OOP 和 JavaScript 的问题。 我想在包含我的taskBody的构造函数中创建一个值，其中包含将由输入值或本地存储中的最终填充分配的 HTML 和模板文字。 我的目标是在两个单独的函数中重用这个 HTML，但我坚持使用模板文字。

class Task {
  constructor() {
    let taskValue //Initializing a variable

    this.taskBody = `<div class="task">
    <span>${taskValue}</span> //Template Literal
      <span class="actions">
       
        <a class="edit-button" title="Edit Task">Edit</a>
        <button class="complete-button" title="Complete Task"><i class="fas fa-check"></i></button>
        
      </span>
    </div>`;

  }

  addTask = () => {
    //Prevent empty task
    if (this.input.value == "") {
      this.setPlaceholder("Please Enter A Task");
      return;
    }

    this.taskValue = this.input.value; //Trying to reassign taskValue to the input value

    this.results.innerHTML += this.taskBody; //Trying to grab the HTML from the constructor and populate with taskValue able

    ls.setLS(this.taskValue); //setting the Local Storage the Task Value, which works
  };

}

我希望如果我在待办事项列表中输入“堆栈溢出”，“堆栈溢出”会填充在 HTML 和本地存储中，但是，它只填充在本地存储中。 待办事项要么是未定义的，要么是空的，要么是空的。

我试过使用this.taskValue 、 let taskValue = ""和let taskValue = null ，但我得到了上述结果。 我哪里出错了，更具体地说，我如何在不同的功能中重用 HTML？

这是一个 CodePen，您可以在其中看到问题：

代码笔

Answer 1

当您第一次实例化Task ， this.taskBody的值设置如下：

<div class="task">
    <span>undefined</span>
    <span class="actions">
       
        <a class="edit-button" title="Edit Task">Edit</a>
        <button class="complete-button" title="Complete Task"><i class="fas fa-check"></i></button>
        
    </span>
</div>

具有undefined值，因为在实例化的那一刻， taskValue是未定义的。

如果您的待办事项列表项是动态添加的（就是这种情况），请考虑使用一个启用动态替换的功能，例如：

getTaskBody = item => `<div class="task">
    <span>${item}</span>
    <span class="actions">
       
        <a class="edit-button" title="Edit Task">Edit</a>
        <button class="complete-button" title="Complete Task"><i class="fas fa-check"></i></button>
        
    </span>
</div>`;

并稍后在第 123 行使用它，而不是：

this.results.innerHTML += this.taskBody;

做：

this.results.innerHTML += getTaskBody(this.taskValue);