Блок JavaScript

Блок для настройки шаблона с использованием встроенного API для валидации и редактирования входных и выходных данных. Для этого предусмотрен базовый класс Task. Чтобы добавить дополнительную логику, его можно переопределить:

exports.Task = class Task extends exports.Task {
    // Здесь будут ваши методы для переопределения валидации и т. п.
}

Основные параметры

  • onRender() — вызывается после каждой отрисовки формы. Это поле необходимо переопределить.

  • getDOMElement() — возвращает корневой родительский HTML элемент.

  • getTemplateData() — возвращает объект со свойствами, использующийся в HTML шаблоне.

  • saveMarkupToStorage() — сохраняет текущий результат разметки в localStorage.

  • validate(result) — вызывается перед отправкой результатов формы. Возвращается true, если данные формы заполнены правильно, иначе — false или объект с сообщением об ошибке. result представляет собой объект с ключом output_values, в котором находятся результаты формы. Это поле необходимо переопределить.

  • transform(result) — вызывается после валидации результатов и позволяет преобразовать их.

Пример result
{
    output_values: {
        field1: "содержимое первого поля",
        field2: "содержимое второго поля"
    }
}

Валидация результатов

Для валидации результатов необходимо в классе Task определить метод validate.

Пример валидации единственного поля text
validate(result) {
    const text = result['text']
    if (!text) {
        return "Пожалуйста, заполните текстовое поле"
    }
    return true
}

Преобразование результатов

Для преобразования результатов перед отправкой необходимо в классе Task определить метод transform.

Пример добавления поля text из исходного задания
transform(result) {
    const templateData = this.getTemplateData()

    return Object.assign(result, { taskText: templateData.text })
}

Обертка для своих скриптов

Если вам нужно запустить что-то сложное или воспользоваться API для получения и отправки результатов напрямую в обход формы:

exports.Task = class MyTask {
    constructor({ el, task, setResult }) {
        // el - корневой HTML-элемент задания
        // task - объект с описанием задания, содержит ссылку на файл задания: {"filename": "https://..."}
        // setResult - функция для отправки результата
    }

    submit() {
        // метод submit вызывается при нажатии на кнопку отправки результата
    }
}

При использовании этого примера HTML и CSS поля из формы игнорируются и не используются.