The Perl Toolchain Summit needs more sponsors. If your company depends on Perl, please support this very important event.
CANID / Yote-0.230 / yote_root / html / testy.html 
<!DOCTYPE html>
<html>
<!-- TODO: rewrite this with templates and new info -->

  <head>
    <title>Test ground</title>
    <script src="/yote/js"></script>

    <script src="/templates/templates.js"></script>

    <script src="/js/main.js"></script>

    <link href="/yote.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/css/main.css" rel="stylesheet" type="text/css" media="all" />

    <META NAME="Author" CONTENT="Eric Wolf, coyocanid@gmail.com">

    <STYLE>

    </STYLE>

    <script type="text/template" class="yote_template_definition" template_name="known_icecream_row">
      <tr><td><$ edit _ flavor $></td><td><$ show _ color $></td><td><$ list_remove_button _ known_icecreams $></td></tr>
    </script>

    <script type="text/template" class="yote_template_definition" template_name="known_icecreams">
      <h2>Ice Creams I know</h2>
    <table><tr><th><$ button flav_sort Flavor$><th><$ button color_sort Color $><th>Action</th></tr>
        <@ known_icecream_row 5 @>
      </table>
      <$$ SearchList flavor color $$><BR>
      <$$ Paginator $$>
    </script>

    <script type="text/template" class="yote_template_definition" template_name="empty">
      No icecreams found
    </script>

    <script type="text/template" class="yote_template_definition" template_name="demo">
      <H1>Template Demo for : <$ show _ nickname $></H1><HR>
      <STYLE>.panel { margin-left:25px; vertical-align:top; margin-top: 25px; display:inline-block }</style>
      <DIV>
        <DIV class="panel"><h2>Info</h2>
          Name : <$ edit _ nickname $><br>
          Favorite Ice Cream : <$ selectobj _ icecream _.known_icecreams flavor $><br>
          Favorite Season : <$ select sandbox season ['Winter','Summer','Spring','Autumn' ] $><br>
          likes checkboxes : <$ checkbox _ likes_checkboxes $><br>
          you sure  : <$ checkbox _ likes_checkboxes $><br>
         <$ button reset_sandbox Reset This Sandbox $>
        </DIV><DIV class="panel">
          <$@ known_icecreams empty _ known_icecreams  @$>
          <div>Add Icecream
            <$$$ new flavor <input type="text" placeholder="Flavor"> $$$>
	    <$$$ new color <input type="text" placeholder="Color"> $$$>
          </div><HR>
	  <$ newbutton _ known_icecreams Learn Icecream $>
          <? rand ?>
       </div>

     </div>
    </script>

    <script>
      $().ready(function(){
          $.yote.include_templates( '/templates/templates.html' );
	  $.yote.util.register_functions( base_templates );

          $.yote.debug = false;
          $.yote.init();

          var app = $.yote.fetch_app( 'MadYote' );

          try {
              var sandbox = app.get_sandbox();
          } catch( err ) {
              console.log( ['err',app] );
              app.reset_sandbox();
          }

          $.yote.util.register_item( 'sandbox', sandbox );

          $.yote.util.register_functions( {
              reset_sandbox : function() { app.reset_sandbox();
                                           sandbox = app.get_sandbox();
                                           $.yote.util.register_item( 'sandbox', sandbox );
                                           refresh_all(); },
              'rand' : function( ic, parent ) {
                  return $.yote.util.fill_template( Math.random() < 0.5 ? 'rand_A' : 'rand_B' );
              },
	      init_sorts : function( args ) {
		  var color_b_id = args[ 'controls' ][ 'color_b' ],
		       flav_b_id = args[ 'controls' ][ 'flav_b' ];
		  $( '#' + color_b_id ).click( function() { color_sort( args ) } );
		  $( '#' + flav_b_id ).click( function() { flav_sort( args ) } );
	      },
              flav_sort : function( args ) { ice_cream_sort( args[ 'default_var' ], 'flavor', 'known_icecreams' ) },
              color_sort : function( args ) {console.log( args ); ice_cream_sort( args[ 'default_var' ], 'color', 'known_icecreams' ) },

          } );

          function ice_cream_sort( sb, fld, wrap_key ) {
	      var known_icecreams = sb.wrap( { wrap_key : wrap_key, collection_name : 'known_icecreams' } );
              if( fld == known_icecreams[ 'sort_field' ] ) {
                  known_icecreams.sort_reverse = ! known_icecreams.sort_reverse;
              }
              else {
                  known_icecreams.sort_field   = fld;
                  known_icecreams.sort_fields  = [ fld ];
                  known_icecreams.sort_reverse = false;
              }
              refresh_all();
          };

          $.yote.util.register_templates( {
              rand_A : 'Random A',
              rand_B : 'Random B',
          } );

          function refresh_all() {
              var looking_for = $( '#ic_search' ).val();
	      $.yote.util.refresh_ui();
	      
	  } //refresh_all
	  $.yote.util.register_function( refresh_all );
	  refresh_all();
      });
    </script>
  </head>

  <BODY>
   <h1>Client Side Template Demo</h1>
    <div id="explain"></div>
    <div id="testplace"></div>

    <DIV id="some_div" class="yote_template" template="demo" default_variable="sandbox"></div>

  </body>
</html>