This is a simple walkthrough that touches on all parts of the client templates that don't involve
Yote objects. Only the BODY
section and the template definitions are included here. The surrounding HTML tags,
javascript includes and template init code is omitted.
The simplist template example. This just places the text of the template in the div
calling the template.
<script type="text/template" class="yote_template_definition" template_name="HelloWorld">
Hello <i>World</i>
</script>
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld"></div>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld">
Hello <i>World</i>
</DIV>
</BODY>
The directive <$$ templatename $$>
gets replaced by the filled out
content of the named template.
<script type="text/template" class="yote_template_definition" template_name="HelloTemplate">
Hello Template
</script>
<script type="text/template" class="yote_template_definition" template_name="HelloWorld">
<$$ HelloTemplate $$> <BR>
Hello World
</script>
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld"></div>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld">
Hello Template <BR>
Hello World
</DIV>
</BODY>
The directive <? registered-function-name ?>
incidates that
a function is to be called and its return value replaces the directive. The function
must be registered with the templating system.
<SCRIPT>
$.yote.util.register_function( "hello", function() { return "Hello Functional World" } );
</SCRIPT>
<script type="text/template" class="yote_template_definition" template_name="HelloWorld">
<? hello ?>
</script>
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld"></div>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld">
Hello Functional World
</DIV>
</BODY>
Buttons and links can be quickly placed in a template using <$ button registered-function-name Button Text $>
and <$ action_link registered-function-name Link Text $>
.
The templating system automatically attaches a click listener that calls the named registered function.
<SCRIPT>
$.yote.util.register_function( "hello", function() { return "Hello CLICK" } );
</SCRIPT>
<script type="text/template" class="yote_template_definition" template_name="HelloWorld">
<$ button hello Clickme for Hello $> <BR>
<$ action_link hello Click Link $>
</script>
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld"></div>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld">
<BUTTON type="BUTTON" id="__yidx_n" class="yote_button" template_id="__yidx_m">Clickme for Hello</BUTTON> <BR>
<A HREF="#" id="__yidx_o" class="yote_action_link" action="hello" template_id="__yidx_m">Click Link</A>
</DIV>
</BODY>
A variable set with the var
directive and accessed with the val
directive.
Variables are passed up from template to template.
<script type="text/template" class="yote_template_definition" template_name="HelloTemplate">
Hello <b><$ val name $></b>.
</script>
<script type="text/template" class="yote_template_definition" template_name="HiAgatha">
<$$$ var name Agatha $$$> <BR>
<$ val name $>
<$$ HelloTemplate $$> <BR>
</script>
<BODY>
<DIV class="yote_template side_panel" template="HiAgatha"></div> <BR>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld">
Hello Agatha
</DIV>
</BODY>
A variable can be reassigned in a template. The new value will remain for any templates called by the template where the value was reassigned.
<script type="text/template" class="yote_template_definition" template_name="HelloTemplate">
Hello <b><$ val name $></b>.
</script>
<script type="text/template" class="yote_template_definition" template_name="HiAgatha">
<$$$ var name Agatha $$$> <BR>
<$ val name $> <BR>
<$$ HelloSomeoneElse $$>
</script>
<script type="text/template" class="yote_template_definition" template_name="HiSomeoneElse">
<$$$ var name Bart $$$> <BR>
<$$ HelloTemplate $$> <BR>
</script>
<BODY>
<DIV class="yote_template side_panel" template="HiAgatha"></div> <BR>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloWorld">
Hello Agatha <BR>
Hello Bart
</DIV>
</BODY>
Assigned variables are automatically passed to registered functions when they are called by the template system. A context object is automatically passed to all functions, and its vars dictionary keying the var values to their name.
<SCRIPT>
function sayhello( context ) {
alert( "Greetings " + context.vars[ 'name' ] );
}
$.yote.util.register_function( "hello", sayhello );
function puthello( context ) {
return "Hello : " + context.vars[ 'name' ];
}
$.yote.util.register_function( "hello", sayhello );
</SCRIPT>
<script type="text/template" class="yote_template_definition" template_name="HelloTemplate">
<$$$ var name Dude $$$>
<$ button hello Clickme $> <BR>
<? sayhello ?$>
</script>
<BODY>
<DIV class="yote_template side_panel" template="HelloTemplate">
<BUTTON type="BUTTON" id="__yidx_n" class="yote_button" template_id="__yidx_m">Clickme</BUTTON> <BR>
Hello : Dude
</div>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloTemplate">
<BUTTON type="BUTTON" id="__yidx_n" class="yote_button" template_id="__yidx_m">Clickme</BUTTON> <BR>
Hello : Dude
</div>
</BODY>
The directive <$$$ control name html control $$$> assigns a serialized id to the html control and replaces the directive with this control. The assigned id is stored in the controls dictionary of the context; the name is the key and the control id is the value. The control can be looked up by the ID.
<script type="text/template" class="yote_template_definition" template_name="HelloTemplate">
<$$$ control text <INPUT TYPE="TEXT"> $$$> <BR>
<$$$ control button <BUTTON type="BUTTON">Clickme</BUTTON> $$$>
<?? setup_hello ??>
</script>
<SCRIPT>
$.yote.util.register_function( "setup_hello",
function( context ) {
var button_id = context.controls[ 'button' ];
var text_id = context.controls[ 'text' ];
$( '#' + button_id ).click( function() {
alert( "Greetings " + $( '#' + text_id ).val() );
} );
} );
</SCRIPT>
<BODY>
<DIV class="yote_template side_panel" template="HelloTemplate"></div>
</BODY>
HTML Result
<BODY>
<DIV class="yote_template side_panel" template="HelloTemplate">
<INPUT TYPE="TEXT" id="__yidx_m"> <BR>
<BUTTON type="BUTTON" id="__yidx_n" class="yote_button" template_id="__yidx_m">Clickme</BUTTON> <BR>
</div>