Короче суть нового UI 901:
Интерфейс состоит из виджетов. Каждый виджет состоит из одного или нескольких HTML элементов и модели. Виджеты создаются так:
<div ui="name"></div>
ui['name'] = function(){
}
В функции мы описываем модель виджета, а в html элементе данные из этой модели доступны через {теги}. Например:
<div ui="name"> Числа {a} и {b} </div>
ui['name'] = function(){
this.a = 9;
this.b = 20;
}
За место {a} и {b} подставятся числа, изменяя числа в модели они автоматически перерисовываются в html.
В модель можно класть как просто какие-то константные значения, так и формулы. Например:
<div ui="name"> {a} + {b} = {c} </div>
ui['name'] = function() {
this.a = 12;
this.b = 19;
this.c = '{a+b}';
};
Теперь в ячейке
с в любой момент времени будет лежать сумма
a+b. Изменив значение
a или
b мы
МГНОВЕННО изменим значение и
с. Формулы записываются как строки, только в фигурных скобках, чтобы отличаться от обычных строк.
Вот
'{так
}' например.
Например мы можем сделать формулу которая будет возвращать всегда актуальный массив:
ui['name'] = function() {
this.a = 12;
this.b = 19;
this.c = '{a+b}';
this.arr = '{ [a,b,c] }'; // [12, 19, 31]
// или так
this.arr = ['{a}', '{b}', '{c}']; // [12, 19, 31]
};
Это называется FRP, когда система в любой момент времени имеет явное и четкое состояние.
К примеру, в ячейке formData у нас всегда содержится актуальный обьект с актуальными данными. И все зависимости видны не вооруженному глазу. Мы можем аяксить этот обьект на сервер совершенно не парясь о его актуальности, абстрагируясь от необходимости следить за его наполнением. Все зависимости просчитываются автоматически.
