Magic Tag Types
Let’s see the general behavior of each tag type:
Insertion Tags
Insertion tags render a value into result.
{{expression}}
Inserts the escaped value of expression
into the result. This is the most common tag.
<!-- Template -->
<div>{{name}}</div>
{ name: "<b>Justin</b>" }
<!-- Result -->
<div><b>Justin</b></div>
{{{expression}}}
Inserts the unescaped value of expression
into the result.
<!-- Template -->
<div>{{{name}}}</div>
{ name: "<b>Justin</b>" }
<!-- Result -->
<div><b>Justin</b></div>
This also works for rendering can-stache-element instances:
import {StacheElement, stache} from "can";
class MyGreeting extends StacheElement {
static view = `<p>Hello {{subject}}</p>`;
static props = {
subject: String
}
}
customElements.define("my-greeting", MyGreeting);
const myGreetingInstance = new MyGreeting({
subject: "friend"
});
const template = stache("<div>{{{componentInstance}}}</div>");
const fragment = template({
componentInstance
});
fragment; //-> <div><my-greeting><p>Hello friend</p></my-greeting></div>
{{>key}}
Renders another template with the same context as the current context.
const template = stache( "<h1>{{>title}}</h1>" );
const frag = template(
{ message: "Hello" },
{
partials: { title: stache( "<blink>{{message}}</blink>" ) }
} );
frag; //-> <h1><blink>Hello</blink></h1>
Other ways to load and reference partials are discussed here.
{{!expression}}
Ignores the magic tag.
<!-- Template -->
<h1>{{!message}}</h1>
{ message: "<blink>Hello</blink>"; };
<!-- Result -->
<h1></h1>
Section Tags
Section tags are passed a subsection and an optional inverse subsection. They optionally render the subsections and insert them into the result.
{{#expression}} ... {{/expression}}
Renders the subsection or inverse subsection depending on the value of expression.
If expression
is truthy, renders the subsection:
<!-- Template -->
<h1>{{#shown}}Hello{{/shown}}</h1>
{ shown: true; };
<!-- Result -->
<h1>Hello</h1>
The subsection is rendered with the expression
value as the top of the scope:
<!-- Template -->
<h1>{{#person}}Hello {{first}} {{person.last}}{{/person}}</h1>
{ person: { first: "Alexis", last: "Abril" } }
<!-- Result -->
<h1>Hello Alexis Abril</h1>
If expression
is falsey, renders the inverse subsection if present:
<!-- Template -->
<h1>{{#shown}}Hello{{else}}Goodbye{{/shown}}</h1>
{ shown: false }
<!-- Result -->
<h1>Goodbye</h1>
If expression
is array-like and its length
is greater than 0, the subsection
is rendered with each item in the array as the top of the scope:
<!-- Template -->
<p>{{#items}}{{.}} {{/items}}</p>
{ items: [ 2, 4, 8, 16 ] }
<!-- Result -->
<p>2 4 8 16 </p>
If expression
is array-like and its length
is 0, the inverse subsection
is rendered:
<!-- Template -->
<p>{{#items}}{{.}} {{else}}No items{{/items}}</p>
{ items: [] }
<!-- Result -->
<p>No items</p>
{{^expression}} ... {{/expression}}
The inverse section does the opposite of the normal {{#expression}} tag. That is, it renders the subsection when {{#expression}} would render the inverse subsection and it renders the inverse subsection when {{#expression}} would render the subsection.
<!-- Template -->
<h1>{{^shown}}Hello{{/shown}}</h1>
{ shown: false }
<!-- Result -->
<h1>Hello</h1>