Data Content

Starting with this Bracy template:

<table>
    <tr>
        <th>x</th>
        <th>i</th>
        <th>@i</th>
        <th>ent</th>
        <th>@ent</th>
    </tr>
    <tr {i:arr} id="best-template">
        <td>{x}</td>
        <td>{i}</td>
        <td>{@i}</td>
        <td>{ent}</td>
        <td>{ent:obj}</td>
    </tr>
</able>

For which the transplate script would generate a templating program like:

[
  {
    "calculate": [
      [
        "i",
        "@"
      ]
    ],
    "template": "auto-id_x_1000",
    "assign": {
      "i": [
        "arr"
      ],
      "ent": [
        "obj"
      ]
    },
    "sub": [
      {
        "context": "auto-id_x_1001",
        "xpath": "text()",
        "parts": [
          [
            "x"
          ]
        ]
      },
      {
        "context": "auto-id_x_1002",
        "xpath": "text()",
        "parts": [
          [
            "i"
          ]
        ]
      },
      {
        "context": "auto-id_x_1003",
        "xpath": "text()",
        "parts": [
          [
            "i",
            "@"
          ]
        ]
      },
      {
        "context": "auto-id_x_1004",
        "xpath": "text()",
        "parts": [
          [
            "ent"
          ]
        ]
      },
      {
        "context": "auto-id_x_1005",
        "xpath": "text()",
        "parts": [
          [
            "ent",
            "@"
          ]
        ]
      }
    ]
  }
]

Given the below backing script:

var x = "yo"
var arr = [ "A", "B" ]
var obj = { a: "10", b: "100" }

The in-browser templating engine collects the following data internally:

dataContent = {
    "best-template": {
        min, max, //etc., metadata
        data: [
          { i: { key: 0, value: "A" }, ent: { key: "a", value: "10" }, x: "yo" },
          { i: { key: 1, value: "B" }, ent: { key: "a", value: "10" }, x: "yo" },
          { i: { key: 0, value: "A" }, ent: { key: "b", value: "100" }, x: "yo" },
          { i: { key: 1, value: "B" }, ent: { key: "b", value: "100" }, x: "yo" }
        ]
    }
}

Resulting DOM:

x	i	@i	ent	@ent
yo	0	A	a	10
yo	1	B	a	10
yo	0	A	b	100
yo	1	B	b	100

Explanation

The colon assignment {i:arr} will assign in each entry the whole structure (with the key and the value) to the name i. When substituting a placeholder that references the name i, the key is taken from the structure. You can access the value using the @ operator. If the placeholder appears in a text node, in its very place, value is substituted (implied @).

[Csaba Skrabák]

Problem: dataContent can't be generated in the planned form. Names like "x" don't really exist as they appear as expressions rather than simple names. Expressions don't make good indexes for the object. The individual input variables of them should be collected but those are revealed in the process of executing the calculate program, whereas object results are done after completing the calculate programs.

[Csaba Skrabák]

Maybe it's fine without the x. dataContent could be renamed, it would only contain the entries, by name, and not the rest of variables or any expressions.