[jQuery] [BrainStorm] $.fn.is can't support complex Event Delegation
Event Delegation are showing its advantage,especially in large
webapp.
what's event delegation:
http://icant.co.uk/sandbox/eventdelegation/
jquery has several plugin to support it, check the one:
http://dev.jquery.com/browser/trunk/plugins/delegate/jquery.delegate.js?rev=5519
it use $.fn.is to check whether the event.target match the selector.
but "$.fn.is" is too weak to support:
http://docs.jquery.com/Traversing/is
quote: If no element fits, or the expression is not valid, then the
response will be 'false'. Note: Only simple expressions are supported.
Complex expressions, such as those containing hierarchy selectors
(such as +, ~, and >) will always return 'true'. filter is used
internally, therefore all rules that apply there apply here, as well.
for example:
<body>
<ul>
<li><a id="it"></a></li>
</ul>
</body>
$('#it').is('.non_exsisting_class a')
will return true, unexpectly.
I heard: jQuery is about to add event delegation feature in the next
release.
question 1: is that true?
I personally think event delegation is a big thing, to break
limitations, and lead UI programming more component-based style and
declaritive-style.
reglib is a very good javascript library to support event delegation.
its author call jQuery(prototype...) as load-traverse-modify style. I
suffered with that style, so I admit. reglib event give some solution
to treat load-traverse-modify style.
I looked into reglib's source code, some duplicates with jQuery.
question 2: Is it possible to merge two projects together?
reglib:
http://code.google.com/p/reglib/
http://code.google.com/p/reglib/w/list
actually, I'd like step further, how about write code like this:
// define a component type named 'sidebar', which contains h2 and ul
var sidebar = reg.defineComponent('sidebar', function(sidebar){
sidebar.init(function(){
//load tranversal and modify??
});
var h2 = sidebar.with('> h2');
var ul = sidebar.with('ul');
var li = ul.with('li');
sidebar.data(function(topData){
h2.data(topData.title);
ul.data(topData.items);
li.data(function(topData){ this.parent.data()[this.index] });
});
h2.click(function(){
alert(this.data()); //topData.title
});
li.hover(
function(){ this.addClass('hover');},
function(){ this.removeClass('hover'); }
);
}
// DOM(id=sidebar) will become a sidebar component, and framework will
bind the data to it and sub-components.
reg.match('#sidebar').to('sidebar', {:title => '...', :items =>
[...]});
UI-data binding is another anoying problem.