bindNode - це єдиний метод класу Seemple, який відповідає за зміни DOM. Він створює міст між значенням властивості і станом HTML елемента на сторінці: від простого інпут до складного віджета (складність елементів не обмежена). Після зв'язування властивості екземпляра і HTML елемента не потрібно більше стежити за синхронізацією даних та виду.

Зверніть увагу, що у метода є статичний аналог, який працює в точності так само, але приймає будь-який об'єкт в якості першого аргументу, зсовуючи інші аргументи вправо.

const bindNode = require('seemple/bindnode');
const object = {};
bindNode(object, key, node, binder, eventOptions);
// замість this.bindNode(key, node, binder, eventOptions);

Для двостороннього зв'язування елемента і значення властивості, в метод передаються три аргументи: ім'я властивості, HTML елемент і правило прив'язки (байндер, біндер, binder, прівязчік). Байндер, в свою чергу, є звичайним об'єктом і може мати наступні властивості: on, getValue, setValue, initialize, destroy (докладніше див. binder). Всі п'ять властивостей опційні. Це дозволяє також оголошувати і односторонні прив'язки.

Метод bindNode підтримує прив'язки "багато до багатьох". З одною властивістю можна зв'язати кілька елементів, а з одним елементом можна зв'язати кілька властивостей, в тому числі і від різних екземплярів різних класів.

this.bindNode('myKey', '.my-element', {
    on: 'click',
    getValue () {...},
    setValue () {...}
});

Наприклад, ви хочете зв'язати властивість об'єкта з елементом input[type="checkbox"]:

this.bindNode('myKey', '.my-checkbox', {
    // Коли змінюється стан елемента?
    // - За подією 'click'
    on: 'click',
    // Як витягти стан елемента?
    // - Повернути значення 'checked'
    getValue() {
        return this.checked;
    },
    // Як встановити стан елемента?
    // - Встановити значення 'checked'
    setValue(v) {
        this.checked = !! v;
    }
});

Після оголошення прив'язки можна встановлювати значення властивості об'єкта самим звичним способом, а елемент змінить свій стан автоматично. При кліці на чекбокс, значення властивості теж зміниться на відповідне.

// Встановлює checked = true
this.myKey = true;

Більш складний приклад: зв'язування властивості об'єкта з віджетом jQuery UI

<div class="my-slider"></div>

this.bindNode('myKey', '.my-slider', {
    // Коли змінювати стан елемента?
    // - За подією 'slide'
    on: 'slide',
    // Як витягти стан елемента?
    // - Повернути значення віджета 'value'
    getValue() {
        return $(this).slider('option', 'value');
    },
    // Як встановити стан елемента?
    // - Встановити значення 'value'
    setValue(v) {
        $(this).slider('option', 'value', v);
    },
    // Як ініціалізувати віджет?
    // Зробити це можна будь-яким способом,
    // але initialize надає трохи синтаксичного цукру
    initialize() {
        $(this).slider({ min: 0, max: 100 });
    }
});

// Встановить значення слайдера 42
this.myKey = 42;

Виглядає просто, але у вас, швидше за все, винекне питанням: "Як зробити так, щоб мені не довелося кожен раз прописувати ці правила?". Дійсно, на сторінці може бути дуже багато однотипних елементів: текстових полів, полів з специфікації HTML5, можуть бути і сторонні віджети (про що говорить приклад вище).

Як видно з документації до аргументів методу bindNode, третій аргумент не обов'язковий. Цю проблему вирішує масив Seemple.defaultBinders, який містить функції, що перевіряють HTML елемент на відповідність заданим правилам і повертають відповідний Байндер або undefined. З'являється можливість багаторазово скоротити код, виносячи правила прив'язки в окрему частину вашого коду, а для прив'язки використовувати синтаксис без третього аргументу:

this.bindNode('myKey', '.my-element');

Як це зробити? Потрібно додати функцію, яка перевіряє ваш елемент на відповідність деяким правилам в початок масиву Seemple.defaultBinders.

const checkboxBinder = () => {
    return {
        on: 'click',
        getValue () {
            return this.checked;
        },
        setValue (v) {
            this.checked = !! v;
        }
    }
};

// Метод unshift додає функцію
// у початок масиву Seemple.defaultBinders
Seemple.defaultBinders.unshift(node ​​=> {
    // Перевіряємо, чи це чекбокс
    if (node.tagName === 'INPUT' && node.type === 'checkbox') {
        // Якщо перевірка пройдена, повертаємо новий байндер
        return checkboxBinder();
    }
});

this.bindNode('myKey', '.my-checkbox');
this.myKey = true;

Що робити, якщо вам потрібно передати аргументи для ініціалізації якогось плагіна або віджету? Можна вручну викликати функцію, яка повертає Байндер.

const uiSlider = (min, max) => {
    return {
        on: 'slide',
        getValue() {
            return $(this).slider('option', 'value');
        },
        setValue(v) {
            $(this).slider('option', 'value', v);
        },
        initialize() {
            $(this).slider({ min: min, max: max });
        }
    }
};

this.bindNode('myKey1', '.my-slider1', uiSlider(0, 100));
this.bindNode('myKey2', '.my-slider2', uiSlider(1, 1000));
this.myKey1 = 42;
this.myKey2 = 999;

Для глобального доступу до байндера, можна розширити Seemple.binders.

Seemple.binders.uiSlider = uiSlider;
// ...
this.bindNode('myKey1', '.my-slider1', Seemple.binders.uiSlider(0, 100));
this.bindNode('myKey2', '.my-slider2', Seemple.binders.uiSlider(1 1000));

Seemple.defaultBinders з коробки містить підтримку всіх без винятку HTML елементів форм: select (включаючи multiple), textarea, output, input (в тому числі і всі типи із специфікації HTML5: text, checkbox, radio, range, number, date, search, time, datetime, datetime-local, color та інших). Це означає, що для стандартних елементів вказувати Байндер не обов'язково.

<input type="color" class="my-color-input">

this.bindNode('myColor', '.my-color-input');
this.myColor = '#66bb6a';

Після прив'язки, вам доступний новий нестандартний CSS селектор :bound(KEY).

this.bindNode('myKey', '.my-element');

// Знайде елемент .my-inner-element який є в '.my-element'
this.bindNode('myAnotherKey', ':bound(myKey) .my-inner-element');

І розширюється синтаксис можливих імен подій:

this.bindNode('myKey', '.my-element');

// Відловити клік на елементі .my-element
this.on('click::myKey', () => {...});

// Відловити клік на елементі .my-element .my-inner-element
this.on('click::myKey(.my-inner-element)', () => {...});

Якщо елемент не знайдений, кидається виняток "Bound element is missing". Для того, щоб уникнути помилки використовуйте метод Seemple#bindOptionalNode

Створення пісочниці

Seemple#bindNode вміє асоціювати екземпляр класу з "головним" HTML елементом, створюючи так звану пісочницю. Це потрібно для того, щоб обмежити вплив об'єкта одним HTML елементом. Для прив'язки пісочниці використовується спеціальна властивість sandbox.

<div class="my-sandbox">
    <!-- Your HTML code -->
</div>

this.bindNode('sandbox', '.my-sandbox');

Визначення пісочниці додає безліч зручностей програмісту. наприклад:

• Дозволяє використовувати методи Seemple#select і Seemple#$
• Додає можливість використовувати селектор :sandbox в методах Seemple#bindNode, Seemple#select, Seemple#$
• Додає синтаксичний цукор для делегованих DOM подій в методі Seemple#on

Слід мати на увазі, що тільки один HTML елемент може бути пов'язаний з властивістю sandbox, інакше кидається помилка. Для оголошення пісочниці можна скористатися методом Seemple#bindSandbox. Перед тим, як оголосити байндінг, метод одв'язує попередню пісочницю.

// Оголошуємо пісочницю
this.bindNode('sandbox', '.my-sandbox');

// .my-element шукається в пісочниці
this.bindNode('myKey', ':sandbox .my-element');

// Для делегованих подій всередині пісочниці не потрібно вказувати ключ
this.on('click::(.my-button)', () => {...});

// Виведе в консоль елемент .inner-node,
// Який знаходиться всередині пісочниці
console.log(this.$('.inner-node'));

Важливі особливості роботи методу і спеціальні прапори

Четвертим аргументом eventOptions в метод bindNode можна передати об'єкт, що складається з прапорів, описаних нижче, глобальних прапорів (наприклад, silent), або кастомних даних, які потраплять в оброблювачі подій bind і bind:KEY.

this.on('bind:x', evt => {
    console.log(evt.foo); // bar
});
this.bindNode('x', node, binder, { foo: 'bar' });

Для ознайомлення з важливими тонкощами роботи bindNode інформація нижче обов'язкова до ознайомлення. При цьому, імена прапорів запам'ятовувати не обов'язково.

Прапор exactKey=false

Якщо в якості key передати строку, що містить точку, то така строка буде інтерпрітірована як шлях до властивості у вкладеному об'єкті. Seemple.js буде слухати зміни в усьому дереві, розриваючи зв'язок для старих гілок, і створюючи його для нових.

this.a = { b: { c: 'foo' } };
this.bindNode ('a.b.c', node);

this.a.b.c = 'bar'; // Оновить елемент значенням bar

const oldB = this.a.b;

this.a.b = { c: 'baz' }; // Оновить елемент значенням baz

// Елемент не оновиться, оскільки він більше не пов'язаний з цією гілкою
oldB.c = 'fuu';

У разі, якщо ім'я властивості має бути використано як є, скористайтеся прапором exactKey зі значенням true.

this['a.b.c'] = 'foo';
this.bindNode('a.b.c', node, binder, {
    exactKey: true
});
this['a.b.c'] = 'bar';

Прапор getValueOnBind

При наявності у байндера getValue, стан елемента буде вилучено та присвоєно властивості відразу після виклику bindNode за умови, якщо прив'язувана властивість має значення undefined. Для того, щоб форсувати цю поведінку навіть якщо властивість - не undefined використовуйте прапор getValueOnBind зі значенням true. Для скасування цієї поведінки, використовуйте той же прапор зі значенням false.

Прапор setValueOnBind

При наявності у байндері setValue, значення властивості буде встановлено в якості стану елемента відразу після виклику bindNode за умови, якщо прив'язувати властивість має значення відмінне від undefined. Для того, щоб форсувати цю поведінку навіть якщо властивість - undefined використовуйте прапор setValueOnBind зі значенням true. Для скасування цієї поведінки, використовуйте той же прапор зі значенням false.

Прапори debounceGetValue=true і debounceSetValue=true

Важливою особливістю методу bindNode є те, що до зміни властивостей і зміни стану елемента застосовується мікропаттерн debounce. Це означає, що якщо прив'язана властивість буде змінена багаторазово за короткий проміжок часу (наприклад, в циклі), стан елемента буде оновлено лише один раз після затримки в кілька мілісекунд (завдяки debounceSetValue=true). І навпаки: якщо стан елемента змінюється багато разів за короткий проміжок часу (тобто викликається відповідна DOM подія), властивість отримає нове значення тільки один раз після короткої затримки (завдяки debounceGetValue=true).

const input = document.querySelector('.my-input');
this.bindNode('x', input);
this.x = 'foo';
console.log(input.value === 'foo'); // false
setTimeout(() => {
    console.log(input.value === 'foo'); // true
});

Для скасування цієї поведінки, використовуйте прапори debounceSetValue i/або debounceGetValue зі значенням false.

Прапори debounceSetValueOnBind=false і debounceGetValueOnBind=false

Як говорилося вище, до зміни властивостей і зміни стану елемента застосовується мікропаттерн debounce. Це не стосується самого моменту зв'язування. При виклику bindNode стан елемента або значення властивості встановлюється синхронно. debounceSetValueOnBind і debounceGetValueOnBind встановлені як true вмикають debounce і для цих процесів.

Прапори debounceSetValueDelay=0 і debounceGetValueDelay=0

Ці прапори дозволяють вказати затримку debounce. debounceSetValueDelay задається при використанні debounceSetValue і debounceSetValueOnBind, debounceGetValueDelay - при використанні debounceGetValue і debounceGetValueOnBind.

Прапор useExactBinder=false

Навіть якщо в метод bindNode передати конкретний байндер, фреймворк спробує відшукати байндер у Seemple.defaultBinder і розширити його властивостями переданого об'єкта. Така можливість дозволяє використовувати дефолтний частково перевизначений байндер.

Наприклад, ми хочемо зв'язати input[type="text"] з властивістю. За замовчуванням, стандартний байндер для цього елемента містить властивість "on" зі значенням "input". Це означає, що значення властивості об'єкта і стан елемента будуть синхронізовані відразу після введення або видалення символу користувачем. У разі, якщо ви хочете, щоб синхронізація відбувалася після DOM події "blur", вам буде потрібно передати третім аргументом об'єкт, що містить єдину властивість "on". Цей об'єкт об'єднається зі стандартним байндером, зберігши при цьому значення getValue і setValue.

this.bindNode('x', '.my-input', { on: "blur" });

Для скасування цієї поведінки і використання байндера як він є, в об'єкт події можна передати прапор useExactBinder зі значенням true.

this.bindNode('x', node, binder, {
    useExactBinder: true
});

У метод Seemple#bindNode можна передати об'єкт щоб уникнути багаторазового виклику методу і скоротити код. Ключі об'єкта - це імена властивостей, а значення можуть бути наступними:

• HTML елемент
• Об'єкт з властивостями node (HTML елемент) і binder
• Масив об'єктів з властивостями node (HTML елемент) і binder

Якщо binder переданий другим аргументом, то він служить байндером для тих елементів, для яких байднер не вказано явно.

Варіація методу дозволяє передати масив об'єктів, що містять інформацію про байндінги. Елемент масиву повинен містити наступні властивості:

• key - ім'я властивості
• node - елемент, для якого оголошуємо зв'язування з key
• binder - байндер (не обов'язково)
• event - об'єкт події (не обов'язково)

Другий аргумент - загальний об'єкт події, що розширює event для кожного байндінга (властивості з event є більш пріоритетні).

У метода є статичный аналог.

При цьому, "одв'язує" попередню, якщо така існує.

У метода є статичний аналог.

Метод calc створює залежність значення властивості (аргумент target) від значень інших властивостей (аргумент source). При зміні source, target обчислюється автоматично.

Зверніть увагу, що у метода є статичний аналог, який працює в точності так само, але приймає будь-який об'єкт в якості першого аргументу, зсуваючи інші аргументи вправо.

const calc = require('seemple/calc');
const object = {};
calc(object, target, source, handler, eventOptions);
// Замість this.calc(target, source, handler, eventOptions);

Аргумент source має кілька варіацій.

Строка

Властивість target буде залежати від властивості source.

this.b = 1;
this.calc('a', 'b', b => b * 2);
console.log(this.a); // 2

Масив строк

Властивість target буде залежати від властивостей, перерахованих в source.

this.b = 1;
this.c = 2;
this.d = 3;
this.calc('a', ['b', 'c', 'd'], (b, c, d) => b + c + d);
console.log(this.a); // 6

Об'єкт з властивостями object і key

В цьому випадку можна оголосити залежність властивості target від іншого об'єкта.

const someObject = { b: 1 };
this.calc('a', {
    object: someObject,
    key: 'b'
}, b => b * 2);

console.log(this.a); // 2

Значенням властивості key можна передати масив ключів.

const someObject = {
    b: 1,
    c: 2,
    d: 3
};
this.calc ('a', {
    object: someObject,
    key: ['b', 'c', 'd']
}, (b, c, d) => b + c + d);

console.log(this.a); // 6

Масив об'єктів з властивостями object і key

Так можна оголосити залежність властивості від властивостей різних об'єктів.

const someObjectX = {
    b: 1,
    c: 2
};
const someObjectY = {
    d: 3
};

this.calc('a', [{
    object: someObjectX,
    key: ['b', 'c']
}, {
    object: someObjectY,
    key: 'd'
}], (b, c, d) => b + c + d);

console.log(this.a); // 6

Масив, що комбінує строки (власні властивості) і об'єкти

this.b = 1;
this.c = 2;

const someObject = {
    d: 3,
    e: 4
};

this.calc('a', ['b', 'c', {
    object: someObjectX,
    key: ['d', 'e']
}], (b, c, d, e) => b + c + d + e);

console.log(this.a); // 10

З міркувань чистоти коду, комбінувати строки і об'єкти в масиві source не рекомендується. Замість строк краще передати об'єкт, у якого властивість object має значення цільового об'єкту. Приклад нижче робить те ж саме, що і попередній.

this.b = 1;
this.c = 2;

const someObject = {
    d: 3,
    e: 4
};

this.calc('a', [{
    object: this, // цільовий об'єкт - це this
    keys: ['b', 'c']
}, {
    object: someObjectX,
    key: ['d', 'e']
}], (b, c, d, e) => b + c + d + e);

console.log(this.a); // 10

Точка в імені властивості-джерела

Якщо ім'я ключа містить точку, метод ініціює залежність від властивості у вкладеному об'єкті.

this.b = { c: { d: 1 } };
this.e = { f: { g: 2 } };

this.calc('a', ['b.c.d', 'e.f.g'], (d, g) => d + g);

console.log(this.a); // 3

Те ж саме стосується і зовнішніх об'єктів

this.b = { c: { d: 1 } };
const someObject = { e: { f: { g: 2 } } };

this.calc('a', [{
    object: this
    key: 'b.c.d'
}, {
    object: someObject
    key; 'e.f.g'
}], (d, g) => d + g);

console.log(this.a); // 3

Метод захищений від циклічних залежностей (наприклад a залежить від b, b залежить від c, а c залежить від a) і при помилці обчислень не блокує сторінку і не кидає виняток про переповнення стека.

Як ви могли помітити, аргументи функції handler завжди розташовані в тому ж порядку, що і властивості з source.

У разі, якщо потрібно змінити значення властивості-джерела і зробити це так, щоб цільова властивість не була обчислена заново, використовуйте метод Seemple#set з прапором skipCalc рівним true.

this.calc('a', 'b', handler);
this.set('b', newValue, {
    skipCalc: true
});

Важливі особливості роботи методу і спеціальні прапори

Четвертим аргументом в метод calc можна передати об'єкт події eventOptions, що містить спеціальні прапори, які описані нижче, прапори для методу set (наприклад, silent), або кастомні дані, які передаються в обробники події change:KEY.

this.on('change:a', evt => {
    console.log(evt.foo); // 'bar'
});

this.calc('a', source, handler, { foo: 'bar' });

Прапор debounceCalc=true

При виклику методу calc цільова властивість обчислюється без затримок, але при зміні властивості-джерела застосовується патерн debounce. Це означає, що цільова властивість зміниться через кілька мілісекунд і тільки один раз, навіть якщо властивості-джерела змінилися багаторазово за короткий проміжок часу.

this.b = 1;
this.c = 2;
this.d = 3;

this.calc('a', ['b', 'c', 'd'], (b, c, d) => b + c + d);

this.on('change:a', () => {
    // Обробник буде викликаний один раз незважаючи на те,
    // що властивості-джерела змінилися тричі
    console.log(`a is changed to ${this.a}`); // a is changed to 60
});

this.b = 10;
this.c = 20;
this.d = 30;
console.log(this.a); // 6 замість 60

Для скасування debounce при зміні властивостей, тобто для включення моментального оновлення цільового властивості (як було в попередніх версіях методу), четвертим аргументом методу calc можна передати прапор debounceCalc рівний false.

this.b = 1;
this.c = 2;
this.d = 3;

this.calc ('a', ['b', 'c', 'd'], (b, c, d) => b + c + d, {
    debounceCalc: false
});

this.on('change: a', () => {
    // Обробник буде викликаний тричі,
    // кожен раз коли властивості b, c чи d змінюються

    // a is changed to ... 15, 33, 60
    console.log (`a is changed to $ {this.a}`);
});

this.b = 10;
this.c = 20;
this.d = 30;
console.log(this.a); // 60

Прапор debounceCalcOnInit=false

Як говорилося вище, при виклику методу calc цільова властивість обчислюється відразу, а при зміні властивостей-джерел - ні. Увімкнути debounce і при першому обчисленні властивості можна передавши в якості властивості об'єкта події прапор debounceCalcOnInit=true.

this.on('change:a', () => {
    // Обробник буде викликаний один раз через невеликий проміжок часу
    console.log(`a is changed to $ {this.a}`); // a is changed to 6
});

this.b = 1;
this.c = 2;
this.d = 3;

this.calc ('a', ['b', 'c', 'd'], (b, c, d) => b + c + d, {
    debounceCalcOnInit: true
});

console.log(this.a); // undefined

На практиці debounceCalcOnInit навряд чи стане в нагоді. Потрібно лише пам'ятати, що є прапор який включає "повний debounce".

Прапор debounceCalcDelay=0

Прапор дозволяє вказати затримку debounce при використанні debounceCalc і debounceCalcOnInit.

Прапор setOnInit=true

Відомо, що при виклику методу calc властивість відразу отримує нове значення. Для того, щоб скасувати цю поведінку і обчислити властивість target тільки тоді, коли властивість-джерело вперше змінено, використовуйте прапор setOnInit рівний false.

this.calc('a', 'b', b => b * 2, {
    setOnInit: false
});

console.log(this.a); // undefined

// Але якщо оновити this.b, для властивості a буде обчислено нове значення
this.b = 1;

Прапор exactKey=false

Як говорилося вище, в якості імені властивості-джерела можна передати строку, що містить точки. Таке ім'я буде витлумачено як шлях до властивості у вкладеному об'єкті. У разі, якщо ім'я має бути використано як є, скористайтеся прапором exactKey зі значенням true.

this['foo.bar.baz'] = 1;
this.calc('a', 'foo.bar.baz', fooBarBaz => fooBarBaz * 2, {
    exactKey: true
});
console.log(this.a); // 2

Прапор promiseCalc=false

Цей прапор дозволяє використовувати екземпляри Promise всередині функції, що обчислює значення. Значенням шуканої властивості стає результат успішного виконання промісу.

Увага! Promise неможливо скасувати. Використовуйте можливість promiseCalc акуратно та не допускайте багаторазового виклику складних функцій.

this.calc('a', ['b', 'c'], (b, c) => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(a + b)
        }, 1000);
    });
}, {
    promiseCalc: true
});

this.b = 1;
this.c = 2;

// "a" буде змінений через секунду

this.calc('response', 'data', async (data) => {
    const resp = await fetch(url, {
        method: 'post',
        body: data
    });

    return resp.json();
}, {
    promiseCalc: true
});

Перший аргумент - об'єкт, ключі якого - імена властивостей, які потрібно обчислювати, а значення - об'єкти, що містять:

• source - властивості, від яких залежить цільова властивість;
• handler - як саме буде обчислена властивість (за замовчуванням дорівнює (value) => value);
• event - об'єкт події (не обов'язково).

Другий аргумент - загальний об'єкт події, що розширює event для кожної шуканої властивості (властивості з event мають більший приоритет).

source може приймати будь-який вид опис вище (рядок, масив рядків, об'єкт з властивостями key і object, масив таких об'єктів).

Зверніть увагу, що у метода є статичний аналог.

Метод створює і фіксує екземпляр класу в якості значення заданогї властивості. При спробі перевизначити властивість, замість самого перевизначення, екземпляр оновлюється. Таким чином досягається цілісність програми, зробленої на базі Seemple.js.

Метод є надбудовою над Seemple#mediate і перевизначає медіатор.

Екземпляр класу створюється під час запуску методу instantiate. Першим аргументом конструктора класу стає поточне значення властивості. У конструкторі класу необхідно передбачити те, що в нього потрапить або undefined (якщо властивість не містила до цього ніяких даних), або об'єкт, з яким треба щось зробити (наприклад, розширити екземпляр класу властивостями об'єкта).

На ділі це виглядає просто: ви створюєте звичайний клас, який майже завжди приймає якісь дані, які потрібно обробити (наприклад, використовувати їх в методі Seemple.Object#setData).

При спробі привласнити властивості інше значення, внутрішній механізм методу instantiate, замість присвоювання, робить наступне:

• Якщо вказана функція updateCallback, метод запускає його з двома аргументами: поточним значенням властивості і даними, які код намагається привласнити.
• Якщо заданий клас успадкований від Seemple.Object, екземпляр оновлюється новими даними, використовуючи метод Seemple.Object#setData з прапором replaceData=true.
• Якщо заданий клас успадкований від Seemple.Array, екземпляр оновлюється новими даними, використовуючи метод Seemple.Array#recreate.
• Якщо не вказана функція updateCallback і якщо класі не успадкований від Seemple.Object або Seemple.Array, екземпляр розширюється властивостями об'єкта, який код намагається привласнити.

Особливістю методу є відсутність обмежень на джерело класу. Класом може виступати будь-яка функція-конструктор. яка ініціалізується за допомогою оператора new, а не тільки спадкоємці Seemple.

Цей метод використовується для перетворення значення властивості при його зміні. Наприклад, вам потрібно, щоб значення властивості завжди було або певного типу, або цілим числом, або бути не менше нуля і не більше ста тощо.

Зверніть увагу, що у метода є статичний аналог, який працює в точності так само, але приймає будь-який об'єкт в якості першого аргументу, зсуваючи інші аргументи вправо.

const mediate = require('seemple/mediate');
const object = {};
mediate(object, key, mediator);
// Замість this.mediate(key, mediator);

Видаляє створений раніше обробник. Всі три аргументи опційні. Ви можете видалити як всі події (не передаючи жодного аргументу), так і окремі (передавши тільки ім'я події, передавши ім'я події і обробник, передавши і ім'я події, і обробник, і контекст)

Метод Seemple#on додає обробник події для екземпляра класу Seemple. Повний список можливих подій з описом см. Тут: eventNames.

Зверніть увагу, що у методва є статичний аналог, який працює в точності так само, але приймає будь-який об'єкт в якості першого аргументу, зсуваючи інші аргументи вправо.

const on = require('seemple/on');
const object = {};
on(object, names, callback, triggerOnInit, context);
// Замість this.on(names, callback, triggerOnInit, context);

У метод Seemple#on можна передати об'єкт з парами подія-обробник, щоб уникнути багаторазового виклику методу і скоротити код.

Метод дозволяє додати обробник події на екземпляр класу Seemple, усуваючи "деренчання" обробника. Функція може бути викликана лише один раз за певний проміжок часу. В іншому, метод працює так само, як і Seemple#on.

У метода є статичний аналог.

У метод Seemple#onDebounce можна передати об'єкт з парами подія-обробник, щоб уникнути багаторазового виклику методу і скоротити код.

Метод працює так само, як і Seemple#on але переданий обробник може бути викликаний тільки один раз.

Зверніть увагу, що у метода є статичний аналог

У метод Seemple#once можна передати об'єкт з парами подія-обробник, щоб уникнути багаторазового виклику методу і скоротити код.

Починаючи з версії 1.1, Seemple.js включає в себе простий DOM парсер, що обробляє синтаксичні конструкції, укладені в подвійні фігурні дужки. Метод parseBindings першим аргументом приймає HTML строку, DOM вузол або селектор, відповідний DOM вузлу.

Так як метод є DOM шаблонізатором (а не строковим HTML шаблонізатором), всі дочірні DOM вузли переданого елемента залишаються в своєму колишньому стані (наприклад, DOM події не затираються).

Підтримуваний синтаксис.

1. HTML прив'язка ```html <!-- Створить текстовий вузол на місці {{user.name}} і зв'яже властивість name з об'єкта user з цим вузлом JS: this.user = {name: 'Joe'}

--> Hello, {{user.name}}

2. Прив'язка елементів форм.
```html
<!--
Зв'яже властивість "x" об'єкту з текстовим
полем (двостороння прив'язка)
JS: this.x = 'some value';
-->
<input type="text" value="{{x}}">

<!--
Для прив'язки textarea і select потрібно використовувати атрибут value
-->
<textarea value="{{x}}"></textarea>
<select value="{{x}}">...</select>

<!--
Зв'яже властивість "x" об'єкту з чекбоксом
(двостороння прив'язка)
JS: this.x = true;
-->
<input type="checkbox" checked="{{x}}">

3. Прив'язка атрибутів. ```html <!-- Значення атрибута href буде залежати від значень властивостей "category" і "someObject.page" (одностороння прив'язка) JS: this.category = 'seemple'; this.someObject = { page: 42 };

--> A link

```

Якщо фігурні дужки не влаштовують, поміняйте їх на щось інше, використовуючи Seemple.parserBrackets

Навіщо потрібен такий метод?

У разі, якщо ви розробляєте велику форму зі стандартними HTML5 полями, метод допоможе зберегти час на оголошення численних прив'язок. Крім цього, parseBindings корисний у разі створення дуже простих колекцій, які не потребують реалізації складної моделі.

Метод дуже схожий на Seemple#selectAll, але повертає лише один елемент або null

У метода є статичний аналог.

Після створення пісочниці методом Seemple#bindNode, можна отримувати і використовувати елементи, що знаходяться в ній. Крім цього, метод підтримує кастомний селектор :bound(KEY).

У метода є статичний аналог.

Список підтримуваних прапорів:

• silent - не викликати події change і change:KEY
• silentHTML - не змінювати стан прив'язаних елементів
• force - викликати події change і change:KEY навіть якщо значення властивості не змінилося
• forceHTML - змінити стан прив'язаного елемента, навіть якщо значення властивості не змінилося. Ця опція потрібна, якщо прив'язаний елемент був відмальований після прив'язки (наприклад, в select були додані теги option)
• skipMediator - запобігає трансформацію властивості медіатором (див. Seemple#mediate)
• skipCalc - запобігає роботу залежностей, створених за допомогою Seemple#calc

У метода є статичний аналог.

Після додавання обробників подій за допомогою методу Seemple#on, Seemple#onDebounce або Seemple#once, подія може бути сгенерована вручну за допомогою цього методу.

Зверніть увагу, що у метода є статичний аналог.

Використовуючи цей метод, можна видалити доданий раніше, але вже не потрібний зв'язок між властивістю і елементом.

Варіація методу дозволяє передати масссів об'єктів, що містять інформацію про байндінги. Елемент масиву повинен містити наступні властивості:

• key - ім'я властивості
• node - елемент, для якого був об'явлений байндінг з key (не обов'язково)

Ця варіація методу зручна тим, що її синтаксис збігається з однією з варіацій методу Seemple#bindNode, дозволяючи привласнити байндінгі змінної для швидкого видалення.

Функція Class дозволяє використовувати класичне ООП в тих випадках, коли немає можливості скористатися синтаксисом ECMAScript 2015 classes.

Цей статичний метод працює так само, як і Seemple#bindNode та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#bindOptionalNode та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#bindSandbox та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#calc та всі його варіації, але приймає в якості першого аргументу будь JavaScript об'єкт.

Функція приймає будь-який об'єкт і повертає екземпляр недоступного ззовні класу, який переймає універсальні методи, дозволяючи їх ланцюговий виклик для роботи з переданим об'єктом.

Універсальні методи - це такі методи, які одночасно є в прототипі Seemple і мають статичний аналог (наприклад, Seemple#bindNode і Seemple.bindNode).

Цей статичний метод працює так само, як і Seemple#instantiate та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Повертає байндер, відповідний елементу. Якщо байндер не знайдений, повертає undefined. Функція перебирає Seemple.defaultBinders для пошуку байндера.

Цей статичний метод працює так само, як і Seemple#mediate та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#off та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#on та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#onDebounce та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#once та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#parseBindings та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#remove та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#select та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#selectAll та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#set та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#trigger та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

Цей статичний метод працює так само, як і Seemple#unbindNode та всі його варіації, але приймає в якості першого аргументу будь-який JavaScript об'єкт.

За замовчуванням, Seemple.js використовує в якості бібліотеки ту, яка знаходиться за посиланням window.$. Якщо такої змінної немає в глобальному просторі імен, або ж вона не включає в себе необхідний набір методів, то використовується вбудована мікро бібліотека.

Метод useDOMLibrary змушує фреймворк використовувати ту бібліотеку, яку ви захочете використовувати, не дивлячись на відсутність такої в глобальному просторі імен або з іншої причини (наприклад, якщо використовується дві різні версії jQuery на сторінці). Необхідно, щоб метод був запущений перед оголошенням будь-яких байндінгов.

Значення властивості можна перетворити за допомогою переданої функції mappingFn.

Значення властивості можна перетворити за допомогою переданої функції mappingFn.

Байндер працює так само, як і Seemple.binders.display, але замість зміни видимості елемента, змінюється наявність елемента на сторінці. Байндер може бути корисним:

• Для великих додатків: в залежності від стану роутера показати ту чи іншу сторінку;
• Для реалізації нескінченного скролінгу;
• Для інших тасків, де потрібно сховати елемент, але його наявність в DOM дереві не є обов'язковою.

Значення властивості можна перетворити за допомогою переданої функції mappingFn.

Значення властивості можна перетворити за допомогою переданої функції mappingFn.

Значення властивості можна перетворити за допомогою переданої функції mappingFn.

Seemple.binders.text дозволяє вивести вміст властивості як є. Значення властивості можна перетворити за допомогою переданої функції mappingFn.

Цей метод застосовується тоді, коли потрібно оголосити властивості, що відповідають за дані, але значення цих властивостей ще не відомі.

Метод дуже схожий на Array.prototype.forEach і є альтернативою циклу for..of.

Цей метод робить дві речі:

1. Встановлює значення заданої властивості.

2. Додає ключ властивості в список даних, що робить властивість доступною для використання в методах Seemple.Object#each, Seemple.Object#keys, Seemple.Object#toJSON) та інших.

Якщо передати прапор replaceData, встановлений як true, в об'єкт події, то інші властивості будуть вилучені зі списку властивостей, що відповідають за дані.

В іншому, метод працює так само, як і Seemple#set.

Метод працює рекурсивно, викликаючи toJSON для всіх властивостей, у яких є метод з таким ім'ям. Для скасування рекурсії передайте false першим аргументом.

Seemple.Array включає в себе всі методи, що входять в нативний JavaScript масив:

• join
• pop
• push
• reverse
• shift
• unshift
• slice
• splice
• sort
• filter
• forEach
• some
• every
• map
• indexOf
• lastIndexOf
• reduce
• reduceRight
• copyWithin
• find
• findIndex
• fill
• includes
• entries
• keys
• concat

При цьому, вони працюють точно так же, як і методи Array.prototype. Є лише кілька застережень:

• Метод forEach повертає себе замість undefined
• Методи, які в оригінальному вигляді повертають новий масив (splice, slice, filter, map ...), повертають новий екземпляр Seemple.Array.
• Методи keys, values та entries повертають масив замість ітератора.

Крім усього, методи генерують події пов'язані з будь-якою модифікацією масиву. Детальніше див. Seemple.Array.

Ознайомившись з Seemple.Array#METHOD стає зрозуміло, що методи не підтримують передачу об'єкта події, так як в точності повторюють синтаксис і кількість аргументів методів вбудованого Array. Синтаксис МЕТОД_ дозволяє передати в обробник події якісь дані або встановити службові прапори, що відповідають за поведінку масиву після виклику методу.

Службові прапори:

• silent - відключає генерацію подій
• dontRender - відключає рендеринг
• skipItemMediator - відключає медіатори

При кожному додаванні елементів в масив, вбудований обробник перевіряє, чи є доданий елемент екземпляром Model і конвертує його в такий, якщо перевірка не пройдена. Рекомендується наслідувати Model від класу Seemple.Object або Seemple.Array (на випадок, якщо потрібно отримати колекцію колекцій), щоб отримати можливість конвертації масиву в звичайний масив методом Seemple.Array#toJSON.

Для більш гнучкого контролю класу елементів (наприклад, якщо для одних елементів потрібно використовувати одну "модель", а для інших - іншу), використовуйте Seemple.Array#mediateItem.

Цей метод служить для того, щоб перехопити і трансформувати додані в масив елементи. Зверніть увагу, метод перевизначає властивість Seemple.Array#Model.

Віртуальний метод onItemRender можна використовувати в якості заміни події render.

При цьому, у вставленого айтема викликається віртуальний метод onRender з єдиним аргументом - об'єктом події.

Цей метод працює майже так само, як і метод orderBy з lodash. Він приймає ключ або масив ключів першим аргументом, порядок (asc/desc) або масив порядків - другим.

Метод дозволяє конвертувати будь-який масив (або об'єкт, подібний масиву) в екземпляр Seemple.Array. Якщо нічого не передано в якості першого аргументу, екземпляр очищується.

Цей метод заново рендерить елементи масиву в контейнері масиву. Якщо вузол, який асоційований з айтемом вже створений, метод, замість перемальовування з нуля, "перевставляє" його в контейнер масиву.

Метод може бути корисним на випадок, коли елементи додані в масив перед оголошенням контейнера.

Щоб змусити масив перемалюватися, незалежно від наявності відрендерених вузлів (наприклад, ви використовуєте кастомний шаблонізатор в itemRenderer), передайте в метод об'єкт з властивістю forceRerender рівною true.

У разі, якщо колекція заздалегідь відмальована на сторінці (наприклад, за допомогою сервера), метод може відтворити колекцію з HTML вузлів.

<!-- One, Two, Three заздалегідь відмальовані -->
<ul class="collection-node">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <script type="text/html" class="renderer">
        <li></li>
    </script>
</ul>

class MyModel extends Seemple.Object {
    constructor(data) {
        super(data);
        this.addDataKeys('value');
    }
    onRender() {
        this.bindNode('value', ':sandbox', Seemple.binders.html())
    }
});

class MyCollection extends Seemple.Array {
    get itemRenderer() {
        return ':sandbox .renderer';
    }
    constructor() {
        this
            .bindNode('sandbox', '.collection-node')
            .restore(':sandbox li');
    }
});

const myCollection = new MyCollection();
myCollection.push({
    value: 'Four'
});

console.log(myCollection.toJSON());
// [{value: 'One'}, {value: 'Two'}, {value: 'Three'}, {value: 'Four'}]

Якщо аргумент selector не заданий, то колекція буде відтворена з елементів, що входять в контейнер ("container" або "sandbox").

При відтворенні, на кожному елементі масиву генерується подія render і викликаються методи onRender і onItemRender (див документацію), як і при звичайному рендерингу.

Метод працює рекурсивно, викликаючи toJSON для внутрішніх об'єктів, у яких є метод з таким ім'ям. Для скасування рекурсії передайте false першим аргументом.