Цель хэлпера для jQuery: разделение js и верстки. С помощью data атрибутов мы передаем в js код необходимую информацию
data-handler - функция в js объекте для обработки события
data-action - событие при котом срабатывает data-handler. По умолчанию click
data-ui - имя переменной в js объекте с которым связывается DOM элемент.
data-ui-context - функция в js объекте которая собирает DOM элементы (см. пример example/03)
data-ui-source - Источник данных для элемента указанного в data-ui (см. пример example/04)
data-controller - явно указывает объект который обрабатывает данный участок кода
window.helperJQ.standardConnection(context, containerUI, rootDOM)
Производит связывание объекта с DOM данными
context - констекст в котором выполняется собятия прописанные в data-handler
containerUI - объект в который складываются элементы указанные через data-ui
rootDOM - Корневой DOM элемент к которому привязывается контекст
containerUI и rootDOM необязательные параметры.
Если они не указываются то считается что containerUI = context.ui, а rootDOM = context.ui.root
window.helperJQ.linkDataUI(data, containerUI);
Перенести данные в интерфейс. По одноименным полям в data и containerUI
data - объект с данными
containerUI - объект в который складываются элементы указанные через data-ui
(см. пример example/04)
window.window.helperJQ.linkDataUI(data, containerUI, true);
Перенести данные в интерфейс и обновляет каждый раз при изменение элементов интерфейса
window.helperJQ.linkDataUI(data, containerUI, function(key){ console.log(key) });
Перенести данные в интерфейс, обновляет каждый раз при изменение элементов интерфейса, вызывает колбэк с указанием поля которое изменилось
При нажатие на кнопку увеличивает счетчик нажатий.
Верстка:
<div id="app">
<button name="test" data-handler="onClick">Нажми на меня</button>
<span data-ui="label">Нажми на кнопку</span>
</div>
JS код:
(function(window) {
'use strict';
function Application(DOM) {
var self = this;
this.countClick = undefined;
// Элементы HTML
this.ui = {
root: $(DOM),
label: undefined
}
// Действо вызываемое из HTML
this.onClick = function() {
self.countClick++;
self.ui.label.text("Количество кликов: " + self.countClick);
};
// Инициализация
this.init = function() {
window.helperJQ.standardConnection(self);
self.countClick = 0;
}
self.init();
}
var app = new Application('#app');
})(window)