Установите глобально, так как вам это нужно и где-то еще. Проверьте узел и npm, если его там нет, установите его отсюда: https://nodejs.org/en/download/

Также проверьте это: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

npm install -g ember-cli

Как только у вас появится доступ к новой команде ember в вашем терминале. Вы можете использовать команду ember new для создания нового приложения.

ember new todo

🎉 Проект успешно создан.
👉 Начните с ввода:

cd todo
запуск npm

Этот выход отображает все данные как источник, из которого данные перемещаются.

Удалите шаблон из приложения hbs, этот вызывающий компонент приветствия теперь генерирует маршрут для todo

Это создаст один шаблон todo и файл маршрута, с маршрутом мы можем указать путь в браузере, чтобы увидеть, как он отображается здесь.

Начните с добавления начальной загрузки

ember install ember-bootstrap

https://www.ember-bootstrap.com/#/getting-started https://getbootstrap.com/docs/4.0/getting-started/introduction/

Добавить начальный список задач для отображения в маршруте

Чтобы отобразить это Todo, добавьте html

Теперь наша цель — добавить Todos в список.

ember генерировать компонент todo-list

Переместите код шаблона в компонент.

чем добавить тег компонента для связи с шаблоном и компонентом

здесь нам нужно добавить функцию Input и on click, которая запускает действие компонента: {{on 'click' (fn this.addTodo это.todo)}}

<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container d-flex justify-content-center">
<div class="col-lg-12">
<div class="card px-3">
<div class="card-body">
<h4 class="card-title">Todo <small>List</small></h4>
<div class="add-items d-flex">
<Input id="firstname" @type="text" @value={{this.todo}} size="50" class="form-control todo-list-input"/>
<button {{on 'click' (fn this.addTodo this.todo)}}
class="add btn btn-primary font-weight-bold todo-list-add-btn">Add</button>
</div>
<div class="list-wrapper">
<ul class="d-flex flex-column-reverse todo-list">
{{#each this.todos as |todo|}}
<li>
<div class="form-check"> <label class="form-check-label">
<input class="checkbox" type="checkbox">
{{todo.task}}
<i class="input-helper"></i></label>
</div>
<i class="remove mdi mdi-close-circle-outline"></i>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Компонент также может иметь файл JavaScript для этой цели. Идите вперед и создайте .js

отслеживаются

Свойство tracked относится к любому полю класса, для которого используется @tracked.

компонент списка дел

import Component from '@glimmer/component';
import { action } from '@ember/object'
import { tracked } from '@glimmer/tracking';
export default class TodoListComponent extends Component {
@tracked todos = [];
@tracked todo = "";
@action
  addTodo(todo) {
    this.todos.addObject({task: todo, is_completed: false});    
    this.todo = "";
  } 
}

и замените @todos на this.todos в шаблоне компонента

Теперь наши todos находятся в рабочем состоянии, теперь мы можем удалить передачу атрибута модели в компонент и посмотреть.

Мы можем завершить это с помощью флажка при щелчке флажка, задача должна быть выполнена.

вы можете сослаться на код здесь: https://github.com/Vish-was/ember-todo