BorisMor / helper-jq

HelperJQ

Цель хэлпера для 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)