SOURCE CODE: Structured Record Population
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>Structured Record Population | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget.Population"/>
  <meta name="description" content="See how the population class is used to dynamically generate HTML using an HTML template and a records array, where each record has structured 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">
    .personRecord {
      width:400px;
      padding:4px;
      border:1px solid #899;
      margin:10px;
      float:left;
      background:#becacd url(../images/page-contents-bg.gif) repeat-x left top;
    }
    .personRecord .name {
      font-size:13px;
      letter-spacing:4px;
      text-transform:uppercase;
      text-shadow:0 -1px 1px #fff, 1px 0 1px #fff, 0 1px 1px #fff;
      padding:4px 12px;
      color:#000;
      background:#b7babf url(../images/title-bg-brushed-metal.jpg) repeat left top;
    }
    .personRecord .address .label {
      float:left;
      font-size:12px;
      padding-top:5px;
      padding-right:10px;
      margin-right:10px;
      color:#fff;
      background:#000;
      width:80px;
      text-align:right;
      text-transform:uppercase;
      border-bottom:1px solid #566;
    }
    .personRecord .address .line {
      font-size:12px;
      background:#c9cfd6 url(../images/tree-menu-bg.gif) repeat-x left top;
      padding-top:5px;
      border-bottom:1px solid #bcc;
    }
    .personRecord .phone {
      color:#000;
      background:#b7babf url(../images/title-bg-brushed-metal.jpg) repeat left top;
      padding:8px 0 8px 0;
    }
    .personRecord .phone span {
      font-size:11px;
      margin:0 15px 0 15px;
    }
  </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>
    Structured Record Population
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/population-structured-record.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.Population.html"><code>Uize.Widget.Population</code></a> class is being used to populate a node with HTML by combining a template string with a record set. The records are not made up merely of simple values, but each field is itself an object containing further fields. These "deep" fields can be substituted into the template string just as easily as top level fields would. In this example, the template item for the <code>Uize.Widget.Population</code> instance is being generated by applying the <code>Uize.Widget.Population.makeTemplateItem</code> static method on the first record of the set. Using <code>{KEY}</code> as the token naming syntax ensures that the values of the deep fields can be substituted into the template string with tokens such as <code>{address.street}</code>, which would substitute the value of the <code>street</code> field of the <code>address</code> field (represented by the key <code>address.street</code>). Best to look at the source code of the example to get the gist of it.</p>
  </div>

  <!-- the template -->

  <div id="page_addresses" style="margin:auto; width:430px;">
    <div class="personRecord">
      <div class="name">{name.first} {name.last}</div>
      <div class="address">
        <div class="label">street</div><div class="line">{address.street}</div>
        <div class="label">city</div><div class="line">{address.city}</div>
        <div class="label">state</div><div class="line">{address.state}</div>
        <div class="label">zip</div><div class="line">{address.zip}</div>
      </div>
      <div class="phone">
        <span><b>cell</b> {phone.cell}</span>
        <span><b>home</b> {phone.home}</span>
        <span><b>fax</b> {phone.fax}</span>
      </div>
    </div>
    <br style="clear:both;"/>
  </div>
</div>

<!-- JavaScript code to wire up page and populate it with person record data -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Population'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** define the data records that will be used in the population process ***/
      var _personRecords = [
        {
          name:{
            first:'John',
            last:'Wilkey'
          },
          address:{
            street:'1 Shiny House Way',
            city:'Richville',
            state:'CA',
            zip:'91234'
          },
          phone:{
            cell:'(650) 123-4567',
            home:'(415) 691-9022',
            fax:'---'
          }
        },
        {
          name:{
            first:'Marie',
            last:'Stevenson'
          },
          address:{
            street:'144 Hawkeye Crescent',
            city:'Klebbsbridge',
            state:'CA',
            zip:'90100'
          },
          phone:{
            cell:'(410) 123-4567',
            home:'(415) 691-9022',
            fax:'---'
          }
        },
        {
          name:{
            first:'Craig',
            last:'Pollack'
          },
          address:{
            street:'500 Oak Drive, apt# 215',
            city:'San Anselmo',
            state:'CA',
            zip:'96100'
          },
          phone:{
            cell:'(650) 123-4567',
            home:'(415) 691-9022',
            fax:'(510) 100-1000'
          }
        }
      ];

    /*** add the Uize.Widget.Population instance ***/
      page.addChild (
        'addresses',
        Uize.Widget.Population,
        {
          templateItem:Uize.Widget.Population.makeTemplateItem (_personRecords [0],'{KEY}'),
          items:_personRecords
        }
      );

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

</script>

</body>
</html>