Git Product home page Git Product logo

helper-jq's Introduction

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)

helper-jq's People

Contributors

borismor avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.