为待办事项添加任务

Question

I am trying to add tasks for each todo list that has a specific title.

Can I get a specific todo list by its id and add some tasks to it? I am new to javascript, so I searched google about adding lists for a specific list with no results :(

class Model {
  constructor() {}

  this.todos = [
      { 
        id: 1,
       title: 'Outside',
       text: 'Running',
       complete: false,
       tasks: [
       { id: 1, text: 'Run a marathon', complete: false},
       { id: 2, text: 'Run with freinds', complete: false}
       ]
    },
    { 
        id: 2,
       title: 'Garden',
       text: 'Plant',
       complete: false,
       tasks: [
       { id: 1, text: 'Plant a garden', complete: false},
       { id: 2, text: 'Water the garden', complete: false}
       ]
    }];

    addTodo(todoText) {
        const todo = {
        id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id + 1 : 1,
        text: todoText,
        complete: false,
        tasks: []
    }

    this.todos.push(todo)
  }
  }

Is it true to do like addTodo function for adding a tasks for a specific todo list like this?

addTodoTask(todoTaskText) {
        const todoTask = {
        id: this.todos.tasks.length > 0 ? this.todos[this.todos.tasks.length - 1].id + 1 : 1,
        text: todoText,
        complete: false,
    }

    this.todos.tasks.push(todoTask)
  }

and how to add a list of a list in javascript like:

<ul>
<li>Running
<ul>
<li>Run a marathon</li>
<li>Run with freind</li>
</ul>
</li>
</ul>

Answer 1

You could make each class handle rendering its own content and just map the list items consecutively while rendering from the top-down.

Edit: The render() methods make use of ES6 template literals . These are special strings that allow you embed variabes and expressions without the use of string concatenation.

 const main = () => { let todoList = new TodoList({ todos : getData() }) document.body.innerHTML = todoList.render() } class TodoTask { constructor(options) { this.id = options.id this.text = options.text this.complete = options.complete } render() { return `<li>[${this.id}] ${this.text} (${this.complete})</li>` } } class TodoEntry { constructor(options) { this.id = options.id this.title = options.title this.text = options.text this.complete = options.complete this.tasks = [] if (options.tasks) { options.tasks.forEach(task => this.addTask(task)) } } addTask(task) { this.tasks.push(new TodoTask(Object.assign({ id : (this.tasks.length || 0) + 1 }, task))) } render() { return `<li> [${this.id}] ${this.title} (${this.complete}) <ul>${this.tasks.map(task => task.render()).join('')}</ul> </li>` } } class TodoList { constructor(options) { this.todos = [] if (options.todos) { options.todos.forEach(todo => this.addTodo(todo)) } } addTodo(todo) { this.todos.push(new TodoEntry(Object.assign({ id : (this.todos.length || 0) + 1 }, todo))) } render() { return `<ul>${this.todos.map(todo => todo.render()).join('')}</ul>` } } function getData() { return [{ id: 1, title: 'Outside', text: 'Running', complete: false, tasks: [{ id: 1, text: 'Run a marathon', complete: false }, { id: 2, text: 'Run with freinds', complete: false }] }, { id: 2, title: 'Garden', text: 'Plant', complete: false, tasks: [{ id: 1, text: 'Plant a garden', complete: false }, { id: 2, text: 'Water the garden', complete: false }] }] } main() // entry

Answer 2

To add a task your todo, you should have a way of knowing which todo list you're updating. Like using the todo's id.

For example your addTaskToTodo will looks like so.

addTask(todoId, taskObject) {
  // find that todos index
  const todoIndex = this.todos.findIndex(todo => todo.id ===todoId);
  // using that index update the tasks
  this.todos[todoIndex].tasks.push(taskObject)
} 

This assumes your taskObject already has all the properties. If you need to manually update its id, you can also do that before pushing by checking the length of the tasks and incrementing by 1.

Answer 3

I made an example of how to use dictionaries instead of arrays, and also a random ID. I think you will find it much cleaner and simpler:

class Model {
  constructor() { }

  todos = {
    1: {
      id: 1,
      title: 'Outside',
      text: 'Running',
      complete: false,
      tasks: {
        1: { id: 1, text: 'Run a marathon', complete: false },
        2: { id: 2, text: 'Run with freinds', complete: false }
      }
    },
    2: {
      id: 2,
      title: 'Garden',
      text: 'Plant',
      complete: false,
      tasks: {
        1: { id: 1, text: 'Plant a garden', complete: false },
        2: { id: 2, text: 'Water the garden', complete: false }
      }


    }
  }


  getRandomId = () => {
    return '_' + Math.random().toString(36).substr(2, 9);
  }

  addTodo(todoText) {
    const id = this.getRandomId();
    const todo = {
      id,
      text: todoText,
      complete: false,
      tasks:{}
    }

    this.todos[id] = todo;
  }

  addTodoTask(todoTaskText,todoId) {//Pass also the id of the todo, to know where this task belongs to.
    const id = this.getRandomId();
    const todoTask = {
      id,
      text: todoTaskText,
      complete: false,
    }

    this.todos[todoId].tasks[id] = todoTask
  }
}

This way you could easily edit/remove both todos and tasks, just by their id, without using any messy Array.filter and such