javascript - 为待办事项添加任务
问题描述
我正在尝试为每个具有特定标题的待办事项列表添加任务。
我可以通过其 id 获取特定的待办事项列表并向其中添加一些任务吗?我是 javascript 新手,所以我在 google 上搜索了有关为特定列表添加列表但没有结果的信息:(
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)
}
}
像这样为特定的待办事项列表添加任务的 addTodo 函数是真的吗?
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)
}
以及如何在 javascript 中添加列表列表,例如:
<ul>
<li>Running
<ul>
<li>Run a marathon</li>
<li>Run with freind</li>
</ul>
</li>
</ul>
解决方案
您可以让每个类处理呈现自己的内容,并在自上而下呈现时连续映射列表项。
编辑:这些render()
方法使用 ES6模板文字。这些是特殊的字符串,允许您在不使用字符串连接的情况下嵌入变量和表达式。
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
推荐阅读
- python - 使用 Numpy 的余弦相似度函数
- mysql - 替换phpmyadmin中以开头和结尾的字符串
- node.js - StaticInjectorError(AppModule)[AppComponent -> DataService]
- php - 多个应用程序,同一域下的多个应用程序版本。如何配置 apache 服务器、路由和相对路径以使其工作?
- r - 改变sclass图中符号的颜色
- node.js - VS Code 没有为在 Docker 容器中运行的 Node 应用程序打断点
- kubernetes - Prometheus Adapter 清空自定义指标项
- javascript - 如何使用 replace() 方法更改 Javascript 中字符串的所有字符?
- jenkins - 在 Jenkins 中创建屏蔽密码的 Groovy 脚本
- c - 如果从标准输入读取,刷新标准输出似乎没有效果