Инициализация

Чтобы отобразить To Do List на странице, выполните следующие шаги:

1. Подключите исходные файлы To Do List на странице
2. Создайте два контейнера: один для List и другой для Toolbar
3. Инициализируйте List и Toolbar

Подключение исходных файлов

Скачайте пакет To Do List и распакуйте его в папку вашего проекта. Получите пакет на странице загрузки.

Подключите следующие исходные файлы на своей странице:

• todo.js
• todo.css

Скорректируйте относительные пути в соответствии со структурой вашего проекта. Пример ниже загружает оба файла из папки dist:

index.html

<script type="text/javascript" src="./dist/todo.js"></script>
<link rel="stylesheet" href="./dist/todo.css">

Создание контейнеров

Виджет To Do List состоит из двух компонентов: List и Toolbar.

Создайте два контейнера для List и Toolbar и назначьте им идентификаторы (например, "root" и "toolbar"). Следующий фрагмент объявляет оба контейнера:

index.html

<div id="toolbar"></div> <!-- контейнер для Toolbar (необязательный) -->
<div id="root"></div> <!-- контейнер для List */}

Инициализация To Do List

Инициализация List

Инициализируйте List с помощью конструктора new ToDo(). Конструктор принимает два параметра:

• контейнер для размещения List (контейнер, созданный выше)
• объект со свойствами конфигурации (полный список см. в обзоре конфигурационных параметров)

Следующий фрагмент кода создаёт List внутри контейнера #root:

index.js

const { ToDo, Toolbar } = todo; // деструктурируем глобальный объект todo

// создаём List
const list = new ToDo("#root", {
    // свойства конфигурации
});

Инициализация Toolbar

Инициализируйте Toolbar с помощью конструктора new Toolbar(). Конструктор принимает два параметра:

• контейнер для Toolbar (созданный на предыдущем шаге)
• объект со свойствами конфигурации (полный список см. в свойствах Toolbar)

информация

Инициализация Toolbar необязательна. Пропустите этот шаг, если Toolbar не нужен в вашем приложении.

Фрагмент кода ниже создаёт Toolbar и связывает его с List через свойство api:

index.js

const { ToDo, Toolbar } = todo; // деструктурируем глобальный объект todo

// создаём List
const list = new ToDo("#root", {
    // свойства конфигурации
});

// создаём Toolbar
const toolbar = new Toolbar("#toolbar", {
    api: list.api
});

заметка

Деструктурируйте глобальный объект todo на ToDo и Toolbar, чтобы использовать их напрямую.

Пропустите этот шаг, если вы вызываете конструкторы new todo.ToDo() и new todo.Toolbar() напрямую.

Загрузка данных в To Do List

В статье Загрузка данных описано, как загрузить данные в DHTMLX To Do List.

Пример