Skip to content

Instantly share code, notes, and snippets.

@danwrong danwrong/hooks.html
Last active Aug 29, 2015

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.