Form ​

Как было ранее сказано, Form - основной механизм, который вы будете использовать. Работа форм построена на событийной системе, что позволяет отлавливать изменения в любом дочернем элементе. Механизм subscribe / unsubscribe позволяют создавать древовидную систему form любой вложенности.

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

Для первоначальной установки необходимо создать экземпляр Form:

import Form from "./Form";

const form = new Form()

import Form from "./Form";

const form = new Form()

Теперь вы можете добавлять FormField на страницу и они автоматически будут взаимодействовать с form. Ознакомится с ними вы можете ЗДЕСЬ ХХХХХХ.

Параметры ​

Для гибкой работы с формой вы можете передать настройки:

const form = new Form(params)

const form = new Form(params)

params Необязательный ​

Объект имеющий следующие свойства:

Подписка на форму ​

Подписка на форму происходит автоматически. Однако бывают ситуации, когда данный механизм не доступен. Например, когда мы создаём две разные формы в одном месте. Какая форма в таком случае будет главная?

Для этого используются следующие методы:

• subscribe - принимает потомка, которого необходимо подписать на форму. Возвращает функцию, чтобы отписать от неё:

import Form from "./Form";

const form = new Form();
const child = new Form({ name: "address" });

form.subscribe(child);

import Form from "./Form";

const form = new Form();
const child = new Form({ name: "address" });

form.subscribe(child);

• unsubscribe - отписывает элемент от формы.

form.unsubscribe(child);

form.unsubscribe(child);

Или можно воспользоваться функцией, которую вернул subscribe:

const offChild = form.subscribe(child);
offChild(); // form.unsubscribe(child);

const offChild = form.subscribe(child);
offChild(); // form.unsubscribe(child);

Внутренние свойства формы ​

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

name Только для чтения ​

Название сущности к которой относится форма. Автоматически устанавливается при создании, если был передан параметр name. Полагаясь на этот параметр дочерние формы взаимодействуют с родительской.

parent Только для чтения ​

Ссылка на родительскую форму.

id ​

Идентификатор формы. Данное свойство свободно редактируется. Чтобы подписаться на изменение id, воспользуйтесь onid методом:

form.onid(newId => console.log('New id: ' + newId)) 

form.id = 1 // New id: 1 
form.id = 2 // New id: 2

form.onid(newId => console.log('New id: ' + newId)) 

form.id = 1 // New id: 1 
form.id = 2 // New id: 2

Также изменение данного поля создаёт событие Form.EVENT_ID, на которое вы также можете подписаться:

form.on(Form.EVENT_ID, () => {});

form.on(Form.EVENT_ID, () => {});

version ​

Версия текущей формы. Аналогично с id, данное свойство свободно редактируется и имеет встроенный обратный вызов onversion и событие Form.EVENT_VERSION:

form.on(Form.EVENT_VERSION, () => console.log("Upgrade."))
form.onversion(v => console.log('Version: ' + v));

form.version = 15; // Upgrade. Version: 15

form.on(Form.EVENT_VERSION, () => console.log("Upgrade."))
form.onversion(v => console.log('Version: ' + v));

form.version = 15; // Upgrade. Version: 15

wait Только для чтения ​

Принимается значение true или false, изменяется в процессе read/save. При изменении данного свойства создаётся событие Form.EVENT_WAIT:

form.on(Form.EVENT_WAIT, () => {...})

form.on(Form.EVENT_WAIT, () => {...})

autonomic ​

Иногда вам нужно, чтобы дочерняя форма зависела от родительской формы, но полагалась на ее состояние. (изменения, значения, наличие). В этом случае сохранение/чтение будет вызываться из родительской формы. Кроме того, измененный значение будет прочитано из родительской формы.

const parent = new Form();
const child = new Form({
    parent,
    name: "user",
    autonomic: true
});

parent.change({
    "user.name": "Jack"
})
child.values  // {}
parent.values // { user: { name: "Jack" } }

const parent = new Form();
const child = new Form({
    parent,
    name: "user",
    autonomic: true
});

parent.change({
    "user.name": "Jack"
})
child.values  // {}
parent.values // { user: { name: "Jack" } }