SOURCE CODE: JavaScript Template Tester
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>JavaScript Template Tester | JavaScript Tools | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="tool Uize.Template"/>
  <meta name="description" content="Experiment with JavaScript templates and see how they can be used to generate HTML. See them compiled to JavaScript functions, and JavaScript modules."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.tabs.css"/>
  <link rel="stylesheet" href="css/tabbed.css"/>
  <style type="text/css">
    /*** overrides to widget.tabs.css ***/
      #page_tabs .tabBodyShell #page_tabs-option3TabBody textarea,
      #page_tabs .tabBodyShell #page_tabs-option3TabBody .textAreaHeading
      {
        width:96%;
        margin-left:2%;
        border:1px solid #555;
      }
      #page_tabs .tabBodyShell #page_tabs-option3TabBody .textAreaHeading {
        font-size:11px;
        letter-spacing:3px;
        background:#b7babf url(../images/title-bg-brushed-metal.jpg) repeat left top;
        text-align:center;
        border-bottom:none;
      }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    JavaScript Template Tester
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/javascript-template-tester.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>The <b>JavaScript Template Tester</b> tool (which makes use of the <a href="../reference/Uize.Template.html"><code>Uize.Template</code></a> module) lets you test the processing of JavaScript templates. It provides a demonstration of the JavaScript templates functionality, and also lets you see the JavaScript function that is "compiled" from a template.</p>
  </div>

  <form>
  <div id="page_tabs" class="tabShell">
    <div class="tabStubShell">
      <a id="page_tabs_option0" class="tabStub" href="javascript://">TEMPLATE SOURCE</a>
      <a id="page_tabs_option1" class="tabStub" href="javascript://">COMPILED FORM</a>
      <a id="page_tabs_option2" class="tabStub" href="javascript://">JST MODULE</a>
      <a id="page_tabs_option3" class="tabStub" href="javascript://">INPUT &amp; OUTPUT</a>
      <br style="clear:left;"/>
    </div>
    <div class="tabBodyShell">
      <div id="page_tabs-option0TabBody" class="tabBodyInactive">
<textarea id="page-templateSource" wrap="off">
&lt;div&gt;
  &lt;% // this is a comment %&gt;
  &lt;% /* this is another comment */ %&gt;
  &lt;h1&gt;&lt;% = input.heading %&gt;&lt;/h1&gt;
  &lt;% for (var repeatNo = -1; ++repeatNo &lt; input.repeats;) { %&gt;
  &lt;img src="someimage.gif"/&gt;&lt;% if (input.showTitle) { %&gt;A TITLE&lt;% } %&gt;
  &lt;% } %&gt;
&lt;/div&gt;
</textarea>
      </div>
      <div id="page_tabs-option1TabBody" class="tabBodyInactive">
        <textarea id="page-compiledForm" wrap="off" readonly="readonly"></textarea>
      </div>
      <div id="page_tabs-option2TabBody" class="tabBodyInactive">
        <textarea id="page-jstModule" wrap="off" readonly="readonly"></textarea>
      </div>
      <div id="page_tabs-option3TabBody" class="tabBodyInactive">
        <div class="textAreaHeading" style="margin-top:12px;">TEMPLATE INPUT</div>
<textarea id="page-templateInput" style="height:100px;">
{
  heading:'MY HEADING',
  repeats:3,
  showTitle:false
}
</textarea>
        <a id="page-processTemplate" class="buttonLink" href="javascript://" style="display:block; width:150px; margin:4px auto;">PROCESS TEMPLATE</a>
        <div class="textAreaHeading">TEMPLATE OUTPUT</div>
        <textarea name="page-templateOutput" style="height:171px;" readonly="readonly"></textarea>
      </div>
    </div>
  </div>
  </form>
</div>

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example',
    'Uize.Widget.Options.Tabbed',
    'Uize.Json',
    'Uize.Str.Lines',
    'Uize.Template',
    'Uize.Template.Module'
  ],
  function () {
    'use strict';

    /*** create a page widget subclass ***/
      var CustomPageWidget = UizeSite.Page.Example.subclass ();

      /*** add property for managing update of scrunched code and scruncher report ***/
        CustomPageWidget.stateProperties ({
          sourceCode:{
            name:'sourceCode',
            onChange:function () {
              var compiledTemplate = Uize.Template.compile (this.sourceCode,{result:'full'});
              this.templateFunction = compiledTemplate.templateFunction
              page.setNodeValue (
                'compiledForm',
                'function (input) {\n' + Uize.Str.Lines.indent (compiledTemplate.code,1,'\t') + '\n}'
              );
              page.setNodeValue (
                'jstModule',
                Uize.Template.Module.buildTemplateModuleText (
                  'YourNamespace.Templates.YourTemplateName',
                  this.sourceCode
                )
              );
            }
          }
        });

    /*** create the example page widget ***/
      var page = window.page = CustomPageWidget ();

    /*** add the tabs child widget ***/
      var tabs = window.tabs = page.addChild (
        'tabs',
        Uize.Widget.Options.Tabbed,
        {
          bodyClassActive:'tabBodyActive',
          bodyClassInactive:'tabBodyInactive',
          values:['templateSource','compiledForm','jstModule','inputAndOutput'],
          value:'templateSource'
        }
      );
      tabs.wire (
        'Changed.value',
        function () {
          var tabsValue = tabs + '';
          if (tabsValue != 'templateSource') {
            updateSourceCodeFromInput ();
            if (tabsValue == 'inputAndOutput')
              processTemplateWithCurrentSettings ()
            ;
          }
        }
      );

    /*** code for compiling and processing template ***/
      function updateSourceCodeFromInput () {
        page.set ({sourceCode:page.getNodeValue ('templateSource')});
      }

      function processTemplateWithCurrentSettings () {
        page.setNodeValue (
          'templateOutput',
          page.templateFunction (Uize.Json.from (page.getNodeValue ('templateInput')))
        );
      }

    /*** make the output and compiled textareas select all when clicked ***/
      page.wireNode (['templateOutput','compiledForm','jstModule'],'click',function () {this.select ()});

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** wire up processTemplate link ***/
      page.wireNode ('processTemplate','click',processTemplateWithCurrentSettings);

    /*** initialize ***/
      updateSourceCodeFromInput ();
  }
);

</script>

</body></html>