The easiest way to create a Template object is using TML (Template Markup Language). TML is JavaScript template string that uses tml as the template function. The basic form of TML is the same as XML with several additional features.
The a TML element tag can be a standard HTML tag string or strings associated with Components published with view.defineComponentTag(). By convention, the tag string for published Components begins with a capital letter. For example:
tml`<Page title="A Page">...</Page>`
Tag strings that don’t begin with a capital letter and don't match any published Components are assumed to be standard HTML tags. These are passed to the built-in Html Component that uses the tag to create a standard HTML DOM element with the same attributes and children. TML can also use a direct reference to the Component class object. For example:
tml`<${MyComponentClass} ...>...</>`
TML has a shorthand to reference state variables using {{...}} notation. For example: {{myStaveVarId}}. This will insert an input or output element that reflects the value of the state variable. There are other forms of state variable reference modify how the state variable is displayed. See Displaying State Variables.
TML character entities take the same form as standard HMTL character entities. For example, &myEntity; will insert the custom Template or string associated with myEntity.
The built-in entities are defined in the charEntity.js file. When TML encounters an entity string, it inserts an CharEntity Component that will extract the entity’s value (a string, a Template object, or an array of string and/or Template objects) and insert it as its contents. Many, but not all, standard HTML entities are supported. Here are some of the non-standard built-in entities:
&lineBreak;: A line break: inserts <br />.&mediaPause;: A media pause symbol.&mediaPlay;: A media play symbol.&mediaNext;: A media next symbol.&mediaDown;: A media move-down symbol.&mediaUp;: A media move-up symbol.&mediaLeft;: A media move-left symbol.&mediaRight;: A media move-right symbol.&switch;: A horizontal double-headed arrow symbol.&rightChevron;: A righthand chevron symbol.&delete;: A trash can symbol.&directTo;: A GPS direct-to symbol.&selectorSym;: A selector symbol. Up and down carets.&gear;: A gear symbol.&trash;: A trash can symbol.&user;: A user symbol.The complete list is in the Character Entity Reference.
In TML, you can fill in entity attributes from an object’s enumerable properties using ...${object}. For example, if an object were defined as follows:
const props = {className: "foo bar", id: "myElement"};
then the following TML string:
tml`<div ...${props}>...</>`
will be equivalent to:
tml`<div className="foo bar" id="myElement">...</>``
when the template string is evaluated. If the object has different properties or values the next time the template string is evaluated, the attribute will change accordingly.
An attribute that takes a string without spaces can delete the quotes around the string. For example:
tml`<div id=myElement>...</>`
Specifying an attribute without an ‘=’ is equivalent to setting it to true in the Template properties. For example:
tml`<input autofocus />`
Is equivalent to:
tml`<input autofocus=${true} />`
TML entities are not restricted to having strings or entities as children. Most components will also accept an array. For example:
tml`
<div>
${[
"foo",
tml`<div>another div</>`
]}
</div>
`
Some Components require other types of children. For example, the <When> Component requires a function. For example:
tml`
<When hasChanged=myStateVar>
${io => (io.myStateVar.value > 10 ? "warning" : "")}
</ When >
`
An <> entity in the TML string will create a Fragment Component. It is useful in cases where a Component requires a single child. The Fragment Component simply wraps its children. In general, this is not required in MVCS.