danwrong/hooks.html

## hooks.html
<!DOCTYPE html>
<html>
	<body>
		<div id="test">
			<a href="" data-ref="bubo">Thingz</a>
			<ul>
				<li data-ref="lots" data-action="ponce">1</li>
				<li data-ref="lots" data-action="mouseover:pants">2</li>
				<li data-ref="lots" data-action="mouseover:pants">3</li>
				<li data-ref="lots" data-action="mouseover:pants">4</li>
				<li data-ref="lots" data-action="mouseover:pants">5</li>
				<li data-ref="lots" data-action="mouseover:pants">6</li>
			</ul>
		</div>

		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
		<script type="text/javascript" src="http://flightjs.github.io/release/latest/flight.min.js"></script>
		<script type="text/javascript">
			function withReferences() {

				this.around('select', function(select, name) {
					if (typeof this.attr[name] != 'undefined') return select(name);
					return this.$node.find("[data-ref=" + name + "]");
				});

			}

			function withDeclaritiveHandlers() {

        this.handlers = {};

        this.attachDelegatedHandler = function(action, type, handler) {
          if (typeof this.handlers[type] == 'undefined') {
            this.handlers[type] = {};
            this.on(type, flight.utils.delegate(this.handlers[type]));
          }

          this.handlers[type]["[data-action=" + action + "]"] = handler;
        }

				this.createHandler = function(i, node) {
					var actions = $(node).attr('data-action');

					actions.split(';').forEach(function(action) {
						var parts = action.split(':');

						if (parts.length == 1) {
							this.attachDelegatedHandler(action, 'click', this[parts[0]]);
							return;
						}

						this.attachDelegatedHandler(action, parts[0], this[parts[1]]);
					}, this);
				}

				this.after('initialize', function() {
					this.$node.find('[data-action]').each(this.createHandler.bind(this));
				});

			}

			flight.component(withReferences, withDeclaritiveHandlers, function() {

				this.ponce = function(e, data) {
          console.dir(e.target, data.el);
					this.select('bubo').html('PONCE');
				}

				this.pants = function(e, data) {
					this.select('bubo').html($(e.target).text());
				}
			}).attachTo('#test');
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<div id="test">
	<a href="" data-ref="bubo">Thingz</a>
	<ul>
	<li data-ref="lots" data-action="ponce">1</li>
	<li data-ref="lots" data-action="mouseover:pants">2</li>
	<li data-ref="lots" data-action="mouseover:pants">3</li>
	<li data-ref="lots" data-action="mouseover:pants">4</li>
	<li data-ref="lots" data-action="mouseover:pants">5</li>
	<li data-ref="lots" data-action="mouseover:pants">6</li>
	</ul>
	</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
	<script type="text/javascript" src="http://flightjs.github.io/release/latest/flight.min.js"></script>
	<script type="text/javascript">
	function withReferences() {

	this.around('select', function(select, name) {
	if (typeof this.attr[name] != 'undefined') return select(name);
	return this.$node.find("[data-ref=" + name + "]");
	});

	}

	function withDeclaritiveHandlers() {

	this.handlers = {};

	this.attachDelegatedHandler = function(action, type, handler) {
	if (typeof this.handlers[type] == 'undefined') {
	this.handlers[type] = {};
	this.on(type, flight.utils.delegate(this.handlers[type]));
	}

	this.handlers[type]["[data-action=" + action + "]"] = handler;
	}

	this.createHandler = function(i, node) {
	var actions = $(node).attr('data-action');

	actions.split(';').forEach(function(action) {
	var parts = action.split(':');

	if (parts.length == 1) {
	this.attachDelegatedHandler(action, 'click', this[parts[0]]);
	return;
	}

	this.attachDelegatedHandler(action, parts[0], this[parts[1]]);
	}, this);
	}

	this.after('initialize', function() {
	this.$node.find('[data-action]').each(this.createHandler.bind(this));
	});

	}

	flight.component(withReferences, withDeclaritiveHandlers, function() {

	this.ponce = function(e, data) {
	console.dir(e.target, data.el);
	this.select('bubo').html('PONCE');
	}

	this.pants = function(e, data) {
	this.select('bubo').html($(e.target).text());
	}
	}).attachTo('#test');
	</script>
	</body>
	</html>