Интеграция с Svelte
Прежде чем читать эту документацию, ознакомьтесь с базовыми концепциями и шаблонами Svelte. Для обновления знаний обратитесь к документации Svelte.
DHTMLX To Do List совместим с Svelte. Приведённые ниже примеры показывают, как использовать их вместе. Полный проект доступен в примере на GitHub.
Создание проекта
Создайте новый проект Svelte и установите зависимости.
Создайте проект Svelte одним из двух способов:
- используйте SvelteKit
- используйте Svelte с Vite без SvelteKit
Пример ниже создаёт проект Svelte + Vite:
npm create vite@latest
Подробности смотрите в соответствующей статье.
Установка зависимостей
Назовите проект my-svelte-todo-app и перейдите в директорию приложения:
cd my-svelte-todo-app
Установите зависимости и запустите сервер разработки с помощью менеджера пакетов.
Выполните следующие команды с yarn:
yarn
yarn start
Выполните следующие команды с npm:
npm install
npm run dev
Приложение запускается по адресу localhost (например, http://localhost:3000).
Создание To Do List
Остановите приложение и установите пакет To Do List.
Шаг 1. Установка пакета
Загрузите пробный пакет To Do List и следуйте инструкциям в файле README. Пробная версия доступна только 30 дней.
Шаг 2. Создание компонента
Создайте Svelte-компонент для добавления To Do List с Toolbar в приложение. В директории src/ создайте новый файл ToDo.svelte.
Импорт исходных файлов
Откройте ToDo.svelte и импортируйте исходные файлы To Do List. Выберите один из двух путей импорта:
- PRO-версия, установленная из локальной папки — импорт из
dhx-todolist-package - пробная версия — импорт из
@dhx/trial-todolist
Пример ниже импортирует из PRO-пакета:
<script>
import { ToDo, Toolbar } from 'dhx-todolist-package';
import 'dhx-todolist-package/dist/todo.css';
</script>
В зависимости от пакета исходные файлы могут быть минифицированы. В таком случае импортируйте CSS-файл как todo.min.css.
Следующий фрагмент импортирует из пробного пакета:
<script>
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import '@dhx/trial-todolist/dist/todo.css';
</script>
В этом руководстве используется пробная версия.
Настройка контейнеров и добавление To Do List с Toolbar
Чтобы отобразить To Do List с Toolbar на странице, создайте контейнеры для обоих компонентов и инициализируйте их с помощью конструкторов. Пример ниже привязывает контейнеры и инициализирует компоненты внутри onMount:
<script>
import { onMount, onDestroy } from "svelte";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
let toolbar_container, todo_container; // инициализация контейнеров для To Do List и Toolbar
let todo, toolbar;
onMount(() => {
// инициализация компонента To Do List
todo = new ToDo(todo_container, {})
// инициализация компонента Toolbar
toolbar = new Toolbar(toolbar_container, {
api: todo.api, // передача внутреннего API To Do List
// другие свойства конфигурации
})
});
onDestroy(() => {
todo.destructor(); // уничтожение To Do List
toolbar.destructor(); // уничтожение Toolbar
});
</script>
<div class="component_container">
<div bind:this={toolbar_container}></div>
<div bind:this={todo_container} style="height: calc(100% - 56px);"></div>
</div>
Загрузка данных
Создайте файл data.js в директории src/ и добавьте в него данные. Следующий пример экспортирует функцию getData(), которая возвращает задачи, пользователей и проекты:
export function getData() {
const tasks = [
{
id: "temp://1652991560212",
project: "introduction",
text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
priority: 1
},
{
id: "1652374122964",
project: "introduction",
text: "You can assign task performers and due dates using the menu.",
assigned: ["user_4", "user_1", "user_2", "user_3"],
due_date: "2033-03-08T21:00:00.000Z",
priority: 2
},
// ...
];
const users = [
{
id: "user_1",
label: "Don Smith",
avatar:
"https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
},
// ...
];
const projects = [
{
id: "introduction",
label: "Introduction to DHTMLX To Do List"
},
{
id: "widgets",
label: "Our widgets"
}
];
return { tasks, users, projects };
}
Откройте App.svelte, импортируйте данные и передайте их в компонент <ToDo/> как props:
<script>
import ToDo from "./ToDo.svelte";
import { getData } from "./data.js";
const { users, tasks, projects } = getData();
</script>
<ToDo {users} {tasks} {projects} />
Перейдите в ToDo.svelte и примените переданные props к объекту конфигурации To Do List. Фрагмент ниже передаёт данные пользователей, задач и проектов через конфигурацию:
<script>
import { onMount, onDestroy } from "svelte";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export let users;
export let tasks;
export let projects;
let toolbar_container, todo_container;
let todo, toolbar;
onMount(() => {
todo = new ToDo(todo_container, {
users,
tasks,
projects,
// другие свойства конфигурации
})
toolbar = new Toolbar(toolbar_container, {
api: todo.api,
// другие свойства конфигурации
})
});
onDestroy(() => {
todo.destructor();
toolbar.destructor();
});
</script>
<div class="component_container">
<div bind:this={toolbar_container}></div>
<div bind:this={todo_container} style="height: calc(100% - 56px);"></div>
</div>
Вы также можете использовать метод parse() внутри onMount() для загрузки данных в To Do List. Пример ниже загружает данные с помощью parse() после инициализации:
<script>
import { onMount, onDestroy } from "svelte";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export let users;
export let tasks;
export let projects;
let toolbar_container, todo_container;
let todo, toolbar;
onMount(() => {
todo = new ToDo(todo_container, {})
toolbar = new Toolbar(toolbar_container, {
api: todo.api,
// другие свойства конфигурации
})
todo.parse({ tasks, users, projects });
});
onDestroy(() => {
todo.destructor();
toolbar.destructor();
});
</script>
<div class="component_container">
<div bind:this={toolbar_container}></div>
<div bind:this={todo_container} style="height: calc(100% - 56px);"></div>
</div>
Каждый вызов parse(data) заменяет текущий набор данных.
Теперь компонент отображает заполненный To Do List. Другие доступные свойства описаны в обзоре конфигурации.
Обработка событий
Подпишитесь на события, чтобы реагировать на действия пользователя. Смотрите полный список событий.
Откройте ToDo.svelte и дополните метод onMount(). Фрагмент ниже прикрепляет обработчик к событию add-task:
<script>
// ...
let todo;
onMount(() => {
todo = new ToDo(todo_container, {});
todo.api.on("add-task", (obj) => {
console.log("A new task is added", obj);
});
});
onDestroy(() => {
todo.destructor();
});
</script>
// ...
Шаг 3. Добавление To Do List в приложение
Чтобы добавить компонент в приложение, откройте App.svelte и замените код по умолчанию следующим фрагментом:
<script>
import ToDo from "./ToDo.svelte";
import { getData } from "./data.js";
const { users, tasks, projects } = getData();
</script>
<ToDo {users} {tasks} {projects} />
Запустите приложение — To Do List отобразится с тестовыми данными:
Полный проект доступен на GitHub.