Reflex: преемник Liveform

Времена меняются, ничто не стоит на месте. И часто бывает так, что то, что было создано ранее, сейчас не кажется таким уж крутым. Это, конечно, печально, но, с другой стороны, это так же является поводом двигаться дальше. По этой причине я решил выпустить новый плагин для работы с формами — Reflex.

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

Первое отличие: добавлено API для доступа к данным формы. С помощью методов get и set можно получать данные формы или определенных её полей, а так же изменять значения полей формы.

var data = $(form).reflex('get');
var value = $(form).reflex('get', 'fieldName');
$(form).reflex('set', { ... });
$(form).reflex('set', 'fieldName', value);

Второе отличие: появилась возможность работать со структурами. Например, к полям формы name[first] и name[last] можно получить доступ по именам name.first и name.last, соответственно. А при получении данных формы, будет возвращен объект вида { "name": { "first": "...", "last": "..." } }.

Еще одно отличие — гибкость. В формах часто используются обертки для полей ввода, такие как select2 или uniform. Соответственно, нужно иметь возможность работать с такими полями так же, как и с остальными. Для этого в Reflex была добавлена возможность создавать адаптеры для полей формы.

var MyInput = $.reflexAPI.createInputClass();
MyInput.prototype.get = function() {
   // получение значения поля ввода
}
MyInput.prototype.set = function(val) {
   // установка значения поля ввода
}
$.reflexAPI.addInputFactory('myinput', function(instance, target) {
   if (target.is('.my-input-class')) { // или любой другой тип проверки
       return new MyInput(target);
   }
   // передаем на обработку следующим factory
   return false;
});

Таким же образом можно не только добавить, но и заменить существующий адаптер.

var MyInput = $.reflexAPI.createInputClass();
$.reflexAPI.replaceInputFactory('select', function(instance, target) {
   if (target.is('select:not([multiple])')) {
       return new MyInput(target);
   }
   return false;
});

Кроме этого, имеется возможность добавлять рефлексы — функции, реагирующие на изменения значений выражений.

$.reflexAPI.defineReflex('bgcolor', function(instance, input, value) {
   input.element.css('background-color', value);
});
<input type="text" data-reflex="bgcolor: if(some_value > 100, 'red', 'white')" />

Изначально, плагин включает следующие рефлексы:

  • value: expression — устанавливает значение поля ввода, или меняет текст HTML-элемента, не являющегося полем ввода, в соответствии со значением выражения;
  • visible: expression — показывает или скрывает элемент, в зависимости от значения выражения;
  • enabled: expression — делает элемент активным или неактивным, в зависимости от значения выражения;
  • exists: expression — временно удаляет элемент из DOM, если выражение ложно;

Исходный код, как всегда, на github, демо можно найти тут.