Ember任务管理应用 #

// app/models/todo.js
import Model, { attr } from '@ember-data/model';

export default class TodoModel extends Model {
  @attr('string') title;
  @attr('boolean', { defaultValue: false }) completed;
  @attr('date') createdAt;
}

// app/services/todos.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class TodosService extends Service {
  @service store;

  @tracked filter = 'all';

  async addTodo(title) {
    const todo = this.store.createRecord('todo', {
      title,
      completed: false,
      createdAt: new Date(),
    });
    await todo.save();
  }

  async toggleTodo(todo) {
    todo.completed = !todo.completed;
    await todo.save();
  }

  async deleteTodo(todo) {
    await todo.destroyRecord();
  }

  get allTodos() {
    return this.store.peekAll('todo');
  }

  get filteredTodos() {
    const todos = this.allTodos;

    switch (this.filter) {
      case 'active':
        return todos.filterBy('completed', false);
      case 'completed':
        return todos.filterBy('completed', true);
      default:
        return todos;
    }
  }

  get remainingCount() {
    return this.allTodos.filterBy('completed', false).length;
  }
}

// app/components/todo-input.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class TodoInputComponent extends Component {
  @service todos;
  @tracked newTitle = '';

  @action
  updateTitle(event) {
    this.newTitle = event.target.value;
  }

  @action
  async addTodo(event) {
    event.preventDefault();

    if (this.newTitle.trim()) {
      await this.todos.addTodo(this.newTitle);
      this.newTitle = '';
    }
  }
}

// app/components/todo-item.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class TodoItemComponent extends Component {
  @service todos;

  @action
  async toggle() {
    await this.todos.toggleTodo(this.args.todo);
  }

  @action
  async delete() {
    await this.todos.deleteTodo(this.args.todo);
  }
}