Learn Yote by example

Level 1 - template commands not using Yote objects

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.

Using a template in a page.

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>

Calling a template from an other template.

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>

Function building templates.

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

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>

Variables

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>

Reassigning Variables

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>

Variables and functions

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>

Controls as variables and after rendering functions

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>