freeart/observable

Lazy attach events to dom elements

Simple

CSS Style

.dialog
{
	display: none;
	position: absolute;
	z-index: 100;
	background-color: #fff;	
}
.dialog li
{
	float: left;
	padding-left: 4px;
	color: #000;	
}

HTML code

<div data-fn="show" data-event="click" data-type="bind">Open dialog
	<ul class="dialog" data-fn="alertSS" data-selector=">li" data-event="click" data-type="delegate">
		<li data-ss="data1">button1</li>
		<li data-ss="data2">button2</li>
	</ul>
</div>

JS Exapmple

var model = {
	this.show = function(e){
		var $el = $(this);
		var panel = $el.find('.dialog');
		panel.css({ top: $el.position().top, left: $el.position().left + $el.width() });
		panel.toggle();
	}
	this.alertSS = function(e){
		alert($(this).data('ss'));
	}
}
$.observable(model);

Several delegates

HTML code

<div data-fn="show" data-event="click" data-type="bind">Open dialog
	<ul class="dialog" data-pref="one,two" data-fn-one="alertSS1" data-selector-one=">li" data-event-one="click" data-type-one="delegate" data-fn-two="alertSS2" data-selector-two=">li" data-event-two="click" data-type-two="delegate">
		<li data-ss="data1">button1</li>
		<li data-ss="data2">button2</li>
	</ul>
</div>

JS Exapmple

var model = {
	this.show = function(e){
		var $el = $(this);
		var panel = $el.find('.dialog');
		panel.css({ top: $el.position().top, left: $el.position().left + $el.width() });
		panel.toggle();
	}
	this.alertSS1 = function(e){
		alert($(this).data('ss') + 'by one');
	}
	this.alertSS2 = function(e){
		alert($(this).data('ss') + 'by two');
	}
}
$.observable(model);

Namespace and Scope

HTML code

<div data-fn="model.show" data-event="click" data-type="bind">Open dialog
	<ul class="dialog" data-fn="alertSS" data-scope="model" data-selector=">li" data-event="click" data-type="delegate">
		<li>button1</li>
	</ul>
</div>

JS Exapmple

var ns = {};
ns.model = {
	this.name = 'Model'

	this.show = function(e){
		var $el = $(this);
		var panel = $el.find('.dialog');
		panel.css({ top: $el.position().top, left: $el.position().left + $el.width() });
		panel.toggle();
	}
}
ns.alertSS = function(e){
	alert(this.name);
}
$.observable(ns);