Examples (Templating Program)

Example 1. "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>

+ transplate script →

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- instances of productrow: -->
    <template id="{1003}">
      <tr>
        <td class="record" id="{1001}">…</td> <!-- auto-id: transplate script has generated it; on instantiation of this html
        template element, the engine will do ID translation, replacing this ID with an instance-specific one, after doing the
        substitutions using the original fragment -->
        <td id="{1002}">…</td> <!-- another auto-id -->
      </tr>
    </template>
  </tbody>
  <script type="text/json" id="templating-program">
    [ 
        { 
            "calculate": [ 
                [ "data" ]
            ],
            "template": "{1003}", 
            "sub": [
                { 
                    "context": "{1001}",
                    "xpath": "text()",
                    "parts": [ 
                        [ "upcCode" ]
                    ]
                },
                { 
                    "context": "{1002}",
                    "xpath": "text()",
                    "parts": [ 
                        [ "productName" ]
                    ]
                }
            ]
        }
    ]
  </script>
</table>

+ engine JS → DOM

...
<tbody>
    <!-- instances of productrow: -->
    <tr>
        <td class="record" id="{20001}">1235646565</td> <!-- the in-browser template engine does ID translation "{20001}": "{1001}" 
        AFTER running the program part that refers to {1001} -->
        <td id="{20002}">Stuff</td> <!-- "{20002}": "{1002}" -->
    </tr>
    <tr>
        <td class="record" id="{20003}">0384928528</td> <!-- "{20003}": "{1001}" -->
        <td id="{20004}">Acme Kidney Beans 2</td> <!-- "{20004}": "{1002}" -->
    </tr>
    <template id="productrow">
        <tr>
            <td class="record" id="{1001}">…</td>
            <td id="{1002}">…</td>
        </tr>
    </template>
</tbody>
...

Example 2. Placeholder in the text node defines the number of instances

<ul>
    <li t:times="1+">{x} eats {y}</li>
</ul>

+ transplate script →

<ul>
    <!-- instances of {1001}: -->
    <template id="{1001}">
        <li id="{1000}">… eats …</li>
    </template>
    <script type="text/json" id="templating-program">
        [
            {
                "template": "{1001}",   /* this ID is present in the real DOM when running this program */
                "sub": [
                    {
                        "context": "{1000}",   /* this ID is not present in the real DOM, it's in a template content */
                        "xpath": "text()",
                        "parts": [
                            [ "x" ],
                            " eats ",
                            [ "y" ]
                        ]
                    }
                ]
            }
        }
    </script>
</ul>

+ BACKING JS:

var x = [ "cat", "snake" ]
var y = [ "pudding", "mouse" ]

+ ENGINE JS → DOM:

<ul>
    <!-- instances of {1001}: -->
    <li id="{20000}">cat eats pudding</li>
    <li id="{20001}">cat eats mouse</li>
    <li id="{20002}">snake eats pudding</li>
    <li id="{20003}">snake eats mouse</li>
    <template id="{1001}">
        <li id="{1000}">… eats …</li>
    </template>
    <script type="text/json" id="templating-program">
    ...