Ленивая инициализация событий на jQuery

Rich приложения, подобные google+, gmail, facebook имеют множество динамически создаваемых элементов управления. Следить за привязкой событий при каждом переходе между интерфейсами может превратиться в ад. Выделять менеджер собитий в отдельный модуль тоже не целесообразно – придется поддерживать список событий в актуальности и со временем этот менеджер стан просто помойкой событий.

<div data-fn="test">Test click</div>

Предлагаю простой вариант ленивой призявки событий к шаблону/интерфейсу одной строчкой:

$.observable({
    test: function(){
        alert($(this).text()); //Test click
    }
});

data аттрибут используется для описания привязываемого события. data-fn – имя метода в объекте events, data-event – тип события, data-type – вариант привязки события, через bind или delegate.

var MainInterface = function() {
    this.dom = $('<div></div>');

    this.dom.append(
        '<div data-fn="say" data-event="click" data-type="delegate" data-word="hello">say hello</div>'
    );
    this.dom.append(
        '<div data-fn="say" data-event="click" data-type="delegate" data-word="world">say world</div>
    ');

    this.dom.observable(this);

    this.say = function () {
        alert($(this).data('word'));
    }
}

var mainInterface = new MainInterface();
mainInterface.dom.appendTo($(document.body));

Какие плюсы мы получаем: Программист пишет чистый код отдельно от верстки, не заботясь об именах классов элементов. Верстка и логика не пересекаются, меняя как угодно дизайн, названия классов, название id элементов мы даем волю дизайнерам и не выясняем почему очередная кнопка отвалилась после изменения дизайна. В качестве шаблонизаторов можно использовать любой движок, любите haml? пожалуйста - добавте data аттрибуты и все события привяжутся автоматом после рендера.

Скачать плагин можно здесь https://github.com/freeart/observable