SOURCE CODE: List Template
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>List Template | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Templates.List"/>
  <meta name="description" content="See a demo of a template JavaScript module - hand-written, rather than compiled from a JST file - used to generate a hierarchical list from JSON data."/>
  <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"/>
  <style type="text/css">
    #page-listShell {
      font-size:11px;
      width:200px;
      height:460px;
      float:left;
      overflow:auto;
      margin-right:10px;
      border:1px solid #9aa;
      padding:10px;
      margin-left:20px;

      /*** gradient ***/
        background: #ffffff; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
    }
    #page-listShell ul, #page-listShell ul li {
      padding-left:0;
      margin-left:10px;
    }
  </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>
    List Template
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/templates-list.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <div style="margin:auto; width:752px;">
    <div id="page-listShell"></div>
    <div style="width:500px; float:left;">
      <!-- explanation copy -->

      <div class="explanation">
        <p>In this example, the <a href="../reference/Uize.Templates.List.html"><code>Uize.Templates.List</code></a> template is being used to populate a node in the page (to the left) with a hierarchical, unordered list that is built from a <code>JSON</code> data tree structure.</p>

        <p>There's nothing in the node when the page loads - you should click on one of the linked JavaScript snippets below to build lists from different data sets. What you see in the JavaScript links is exactly the JavaScript code that will be executed when you click the links and that is responsible for building the list HTML and putting it into the page.</p>

        <p>Now, it's just a list - nothing more. We're not dealing with an expandable/collapsible tree widget here - just a dead simple list generator template. JavaScript templates can be used to generate markup for widgets, or they can be used by build scripts to build HTML pages, or by server side JavaScript to generate HTML pages.</p>
      </div>

      <!-- programmatic interface examples -->

      <div class="programmaticInterface" style="margin-top:0;">
        <ul>
          <li><a href="javascript://" class="linkedJs">page.setNodeInnerHtml ('listShell',Uize.Templates.List.process ({items:Uize.Test.TestData.Animals ()}))</a><br/><br/></li>
          <li><a href="javascript://" class="linkedJs">page.setNodeInnerHtml ('listShell',Uize.Templates.List.process ({items:Uize.Test.TestData.Plants ()}))</a><br/><br/></li>
          <li><a href="javascript://" class="linkedJs">page.setNodeInnerHtml ('listShell',Uize.Templates.List.process ({items:Uize.Test.TestData.AnimalsAndPlants ()}))</a></li>
        </ul>
      </div>
    </div>
    <div style="clear:left;"></div>
  </div>
</div>

<!-- JavaScript code to create tree list instance and insert and wire its UI -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Templates.List',
    'Uize.Test.TestData.Animals',
    'Uize.Test.TestData.Plants',
    'Uize.Test.TestData.AnimalsAndPlants'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

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

</script>

</body>
</html>