A simple test

[Colin Clark]

Jacob,

This is a good point, and something I thought about awhile ago when we  
settled on selectors as the primary way to identify things in the DOM.  
Here's my rationale...

On 8-Aug-08, at 5:05 PM, Jacob Farber wrote:

> and then naturally gravitate to write this as the initialization  
> code...
>
> fluid.reorderLayout ("#container", {
>    columns: "#container > div",
>    modules: "#container > div > div"
> });
>
> .... this wont work because calling ("#container > div") as is scoped
> within ("#container") will give you nothing, even though they should  
> be
> perfectly legal columns and modules to work with the component.
> I spoke with Anastasia for a while about the purpose of scoping within
> the internals of the layout customizer code, but I think we need to
> reconsider how its done: instead of automatically scoping selectors to
> within the container for all jQuery calls, why not simply allow the
> implementor to use whatever selector pattern they prefer (allowing  
> them
> to use whatever markup they prefer) and THEN verify its a legal module
> or column? Am I misunderstanding how the component works?


You're right. Our components automatically scope all selectors to the  
container they are given, and it could be a source of confusion for a  
new user.

The reason we do this is to ensure that there's never the risk of a  
component accidentally sucking up DOM elements that don't belong to  
it. It's easy to forget to constrain your selectors, and I've noticed  
that this tends to happen quite often. If the components automatically  
constrain to a container, we ensure that it's just not possible to  
accidentally select the wrong stuff.

I'm certainly open to other ideas, but I think we should continue to  
use this approach in our API. We should encourage our users to take  
advantage of relative selectors instead. So, the selectors you mention  
above are easily written like this:

fluid.reorderLayout ("#container", {
    columns: "> div",
    modules: "> div > div"
});

I whipped up some test markup and this worked just fine. We should  
certainly beef up our documentation to include a section on how to  
write good selectors for our components.

Thoughts?

Colin

---
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org