Краткий обзор Matreshka.js. В посте используется ECMAScript 2017, который можно переписать на ECMAScript 5.
Основные функции
Функция bindNode
связывает свойство и элемент.
const object = { name: 'Brendan' };
const node = document.querySelector('.name');
Matreshka.bindNode(object, 'name', node);
object.name = 'Doug';
Если свойство меняется, меняется и элемент, если элемент меняется (например, пользователь вводит текст), меняется и свойство. Из коробки Matreshka.js умеет обрабатывать любые элементы форм. Можно объявить байндинг для произвольных элементов см. документацию.
Функция calc
связывает одно свойство с другими.
Matreshka.calc(object, 'fullName', ['firstName', 'lastName'], (firstName, lastName) => {
return `${firstName} ${lastName}`
});
object.firstName = 'Brendan';
object.lastName = 'Eich';
// ...
console.log(object.fullName); // "Brendan Eich"
Когда меняется свойство-источник (firstName
или lastName
), меняется и свойство-цель (fullName
).
Вместе с функцией bindNode
можно объявлять длинные цепочки зависимостей: свойство a
зависит от состояния элемента e1
, свойство b
зависит от свойства a
, свойство c
зависит от элементов e2
и e3
и от свойства b
, изменение которого, как следствие, меняет e1
, e2
и e3
...
Такие зависимости можно представить как таблицу в табличном процессоре (например, Excell): в каждый момент времени вы думаете об одной формуле, а не о многочисленных связях все ячеек. Как следствие, получаете меньше багов, так как нужно думать об атомарных сущностях, а не обо всей "таблице" (приложении). Больше информации в документации.