[jquery-entwine] Enhancement - nested selectors

[Tom Locke]

Hi

I've made a small enhancement to Entwine and am wondering what others think of it.

A very common usage (I suppose) of Entwine is to take a certain chunk of HTML and turn it into an interactive widget by giving it state and behaviour. In this arrangement, it's quite common to add a bunch of things to the top-level node in the chunk, and then also add some stuff to things nested inside - e.g. the widget may contain some buttons that need onclick handlers.

With my tweak you can do

$("div.movie").entwine({

method1: function() { ... },

"& button.play": {

onclick: function() { ... }

}

})

Instead of separately having to write

$("div.movie").entwine({ ... })
$("div.movie button.play").entwine({ ... })

Wadayathink?

Tom



--
Subscription settings: http://groups.google.com/group/jquery-entwine/subscribe?hl=en

[hamish]

Hi Tom,

I've been thinking about something like that for a while. Since
Entwine decides what a particular key/value pair does (adds entwined
method, property, event handler, etc.) based on what's in the key, the
trick is to find a key format that isn't going to clash with anything.

I quite like using '&' - did you take that from sass? Do you think
that just at the beginning would be enough, or anywhere in the
selector, i.e.

$('div.movie').entwine({
'body.foo &': {
}
});

Obviously the second could be abused to produce totally unreadable
code, but it could still be useful in some situations.

Another reason I like using '&' is that we can use the same syntax for
delegated events. Currently there's a pattern I use a lot for getting
events from non-children elements that looks like

$('foo').entwine({
onmatch: function(){
var self = this;
this.parent('bar').bind('change', function()
{ self.onchangefromparent(); });
}

...

});

Which I don't like - every onmatch adds a performance penalty, and
binding like that causes a reference to be created, so elements don't
get garbage collected like they should unless you carefully unbind.

We could use the same syntax to do

$('foo').entwine({
'onchange from bar:has(&)': function(){
...
}
});

Hamish Friedlander