javascript - 使用纯 JavaScript 组件执行列表任务

标签 javascript components

有一个待办事项列表任务。 共有三个组成部分。 TodoAppComponent 类、TodoFormComponent 类和 TodoListComponent 类。 请检查 TodoListComponent 中的 didTask() 。 当我添加任务时，当复选框状态更改为“已选中”时，我需要跨行 它似乎无法正常工作，但控制台没有显示任何错误

class TodoAppComponent {
  constructor(mountPoint, props = {}) {
    this.mountPoint = mountPoint;
    this.props = props;
  }

  querySelectors() {
    this.todoFormMountPoint = this.mountPoint.querySelector(
      ".todo-app__form-point"
    );
    this.todoListMountPoint = this.mountPoint.querySelector(
      ".todo-app__list-point"
    );
  }

  mountChildren() {
    this.todoFormComponent = new TodoFormComponent(this.todoFormMountPoint, {
      onTodoAdd: this.handleTodoAdd.bind(this)
    });
    this.todoFormComponent.mount();
    this.todoListComponent = new TodoListComponent(this.todoListMountPoint);
    this.todoListComponent.mount();
  }

  handleTodoAdd(task) {
    this.todoListComponent.addTask(task);
    const numItems = this.todoListComponent.getNumTasks();
    this.todoFormComponent.setCounter(numItems + 1);
  }

  mount() {
    this.mountPoint.innerHTML = this.render();
    this.querySelectors();
    this.mountChildren();
  }

  render() {
    return `
      <div class="todo-app">
        <h2>Todo:</h2>
        <div class="todo-app__form-point"></div>
        <div class="todo-app__list-point"></div>
      </div>
    `;
  }
}

class TodoFormComponent {
  constructor(mountPoint, props = {}) {
    this.mountPoint = mountPoint;
    this.props = props;
  }

  querySelectors() {
    this.field = this.mountPoint.querySelector(".todo-form__field");
    this.btn = this.mountPoint.querySelector(".todo-form__btn");
    this.counter = this.mountPoint.querySelector(".todo-form__counter");
  }

  addEventListeners() {
    this.btn.addEventListener("click", this.handeBtnClick.bind(this));
  }

  handeBtnClick() {
    this.props.onTodoAdd(this.field.value);
    this.field.value = "";
  }

  mount() {
    this.mountPoint.innerHTML = this.render();
    this.querySelectors();
    this.addEventListeners();
  }

  setCounter(val) {
    this.counter.innerHTML = val;
  }

  render() {
    return `
      <div class="todo-form">
        <input class="todo-form__field" type="text">
        <button class="todo-form__btn">
          Add #<span class="todo-form__counter">1</span>
        </button>
      </div>
    `;
  }
}

class TodoListComponent {
  constructor(mountPoint, props = {}) {
    this.mountPoint = mountPoint;
    this.props = props;
  }

  querySelectors() {
    this.list = this.mountPoint.querySelector(".todo-list");
  }

  mount() {
    this.mountPoint.innerHTML = this.render();
    this.querySelectors();
    this.doneTask();
  }

  addTask(task) {
    this.list.innerHTML += `
    <tr><td><input class ="checkbox" type="checkbox"></td>
    <td>${task}</td>
    <td><button value="&#215" style="width:5px;height:15px;"></button></td></tr>
        `;
  }

  doneTask() {
    let checkboxElements = document.getElementsByClassName("checkbox");

    for (let i = 0; i < checkboxElements.length; i++) {
      checkboxElements[i].addEventListener("change", function() {
        if (this.checked) {
          this.closest("tr").style.textDecoration = "line-through";
        }
      });
    }
  }
  getNumTasks() {
    return this.list.children.length;
  }

  render() {
    return `
      <br>
      <table class="todo-list" style="width:50px"></table>
    `;
  }
}

const root = document.querySelector("#root");

const cmp = new TodoAppComponent(root);

cmp.mount();
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  
</body>
</html>

最佳答案 

class TodoAppComponent {
  constructor(mountPoint, props = {}) {
    this.mountPoint = mountPoint;
    this.props = props;
  }

  querySelectors() {
    this.todoFormMountPoint = this.mountPoint.querySelector(
      ".todo-app__form-point"
    );
    this.todoListMountPoint = this.mountPoint.querySelector(
      ".todo-app__list-point"
    );
  }

  mountChildren() {
    this.todoFormComponent = new TodoFormComponent(this.todoFormMountPoint, {
      onTodoAdd: this.handleTodoAdd.bind(this)
    });
    this.todoFormComponent.mount();
    this.todoListComponent = new TodoListComponent(this.todoListMountPoint);
    this.todoListComponent.mount();
  }

  handleTodoAdd(task) {
    this.todoListComponent.addTask(task);
    const numItems = this.todoListComponent.getNumTasks();
    this.todoFormComponent.setCounter(numItems + 1);
  }

  mount() {
    this.mountPoint.innerHTML = this.render();
    this.querySelectors();
    this.mountChildren();
  }

  render() {
    return `
      <div class="todo-app">
        <h2>Todo:</h2>
        <div class="todo-app__form-point"></div>
        <div class="todo-app__list-point"></div>
      </div>
    `;
  }
}

class TodoFormComponent {
  constructor(mountPoint, props = {}) {
    this.mountPoint = mountPoint;
    this.props = props;
  }

  querySelectors() {
    this.field = this.mountPoint.querySelector(".todo-form__field");
    this.btn = this.mountPoint.querySelector(".todo-form__btn");
    this.counter = this.mountPoint.querySelector(".todo-form__counter");
  }

  addEventListeners() {
    this.btn.addEventListener("click", this.handeBtnClick.bind(this));
  }

  handeBtnClick() {
    this.props.onTodoAdd(this.field.value);
    this.field.value = "";
  }

  mount() {
    this.mountPoint.innerHTML = this.render();
    this.querySelectors();
    this.addEventListeners();
  }

  setCounter(val) {
    this.counter.innerHTML = val;
  }

  render() {
    return `
      <div class="todo-form">
        <input class="todo-form__field" type="text">
        <button class="todo-form__btn">
          Add #<span class="todo-form__counter">1</span>
        </button>
      </div>
    `;
  }
}

class TodoListComponent {
  constructor(mountPoint, props = {}) {
    this.mountPoint = mountPoint;
    this.props = props;
  }

  querySelectors() {
    this.list = this.mountPoint.querySelector(".todo-list");
  }

  mount() {
    this.mountPoint.innerHTML = this.render();
    this.querySelectors();
    this.doneTask();
  }

  addTask(task) {
    this.list.innerHTML += `
    <tr><td><input class ="checkbox" type="checkbox"></td>
    <td>${task}</td>
    <td><button value="&#215" style="width:5px;height:15px;"></button></td></tr>
        `;
        
     this.doneTask();
  }

  doneTask() {
    let checkboxElements = document.getElementsByClassName("checkbox");

    for (let i = 0; i < checkboxElements.length; i++) {
      checkboxElements[i].addEventListener("change", function() {
        if (this.checked) {
          this.closest("tr").style.textDecoration = "line-through";
        }
      });
    }
  }
  getNumTasks() {
    return this.list.children.length;
  }

  render() {
    return `
      <br>
      <table class="todo-list" style="width:50px"></table>
    `;
  }
}

const root = document.querySelector("#root");

const cmp = new TodoAppComponent(root);

cmp.mount();
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  
</body>
</html>

因为您的函数 doneTask() 没有被调用，所以样式没有更新。尝试这个。 我刚刚在 addTask() 中调用了 doneTask()。

希望这有帮助!!

关于javascript - 使用纯 JavaScript 组件执行列表任务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49126812/

上一篇：javascript - yii2 从 View 和调试进程中调用 Controller 操作

下一篇：javascript - after() 显示解析后的 html

相关文章：

javascript - 如何制作【条件格式】脚本？

vue.js - 为 element-ui 表设置行组件

javascript - 无法覆盖 React 中的方法

拉维和 Vue : Communication between different Vue components split by Laravel views

javascript - 一个列表项而不是所有列表项的 ReactJS 悬停/鼠标悬停效果

javascript - 302响应错误

javascript - 如果 jquery 中已禁用按键按下事件，如何启用该事件

javascript - 从数组中删除多余的 ""

javascript - Angular 5 子组件公开属性但不公开方法

java - 多个 Graphics2D 对象

©2024 IT工具网  联系我们