Selector Binding

Description

Automatically injected into components that support getClientId(). This combines with
the selector binding to create jQuery selectors. The selector binding supports 'this'
which returns the selector for the enclosing component that supports getClientId().
For the most part the selector binding will return the correct value. Specifically
you can't always get the correct selector for a named component in a loop. More
specifically if a component with the same name is rendered more than once on
a page the selector changes as that component is rendered. In this case the
selector binding will return a selector for the currently rendering component.
This may or may not be the one you want.

This demonstration page will show you How to use the selector Binding. This selector will
use the Selector mixin, injected automatically to the ClientElement component. This
mixin will create an array like : selector['the Tapestry Id']='#The jQuery Id';

- Using "this" will return the clientId of the current Element.

- If you want to get the clientId of specific component, you will use the t:id parameter of the component

- We have also an example of using the selector binding in JavaScript Callback function.

Please have a look to the template file in order to understand the demo.

Using "this" inside a component will return the clientId of the
component container :
>> $('#any')

If you do not specify the t:id to your components, the selector will nethertheless
use the unique t:id generated by Tapestry :

>> $('#any_0')

>> $('#any_1')

If you want to get the clientId of a specific component, you can use its t:id
parameter :

>> $('#test') $('#first')

Event if we used many times "this" before, in this case, we will get the clientId
of the Component container :
>> $('#any')

<t:any class="${selector:this}" t:mixins="slider,slidechange"
slidechange.event="slidechange"
slidechange.callback="function (event,ui,url)
{alert('The id of the current element is : ' + ${selector:this}.attr('id'));}"
options='{min:0, max:100, value: 10, step: 2 }'
>
<br /><br />Using "this" inside a component will return the clientId of the
component container : <br />
>> ${selector:this}<br /><br />
<t:any t:id="first" >
</t:any><br /><br />
If you do not specify the t:id to your components, the selector will nethertheless
use the unique t:id generated by Tapestry :<br />
<t:any >>> ${selector:this}</t:any>
<t:any >>> ${selector:this}</t:any><br /><br />
If you want to get the clientId of a specific component, you can use its t:id
parameter :<br />
<t:any t:id="test">>> ${selector:this} ${selector:first}</t:any><br /><br />
Event if we used many times "this" before, in this case, we will get the clientId
of the Component container :<br />