Examples (Templating and Backing Scripts)

Example A. "producttable.b.htm":

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <tr {data}>
      <td class="record">{upcCode}</td>
      <td>{productName}</td>
    </tr>
  </tbody>
</table>

+ BACKING JS:

var data = [ { upcCode: "1235646565", productName: "Stuff" },
{ upcCode: "0384928528", productName: "Acme Kidney Beans 2" } ]

+ ENGINE JS →

UPC_Code	Product_Name
1235646565	Stuff
0384928528	Acme Kidney Beans 2

Example B. Dynamic Attributes

<span id="triangle" t:backing-class="Triangle">
    <t:attribute name="data-{i}">{i:dataset}</t:attribute>
    that's right
</span>

+ BACKING JS "somepage.js":

class Triangle {
    dataset = { a: 3, b: 4, c: 5 }
}

→ TARGET DOCUMENT MODEL:

<span id="triangle" data-a="3" data-b="4" data-c="5">
    that's right
</span>

Example C. Dummy

Bracy template:

<dl>
    <t:container {terms} t:dummy={dummy}> <!-- presence of a t:dummy attribute implies t:times="1+" -->
        <dt>{term}</dt>
        <dd>{meaning}</dd>
    </t:continer>
</dl>

+ backing JS:

var dummy = { term: "no term", meaning: "no meaning" }
var terms = (Math.random() > 0.5 ? [
    { term: "Coffee", meaning: "Black hot drink" },
    { term: "Milk", meaning: "White cold drink" }
] : [])

→ DOM sometimes:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Other times:

<dl>
  <dt>no term</dt>
  <dd>no meaning</dd>
</dl>

More Examples

See also wiki page [Examples (Templating Program)] for examples showing the in-between stage of templating: after transplating, the html templates and templating program.