{{# EXPRESSION }} TRUTHY {{else}} FALSY {{/ EXPRESSION }}

Defines a TRUTHY section and optional FALSY expression. TRUTHY or FALSEY are rendered zero or many times depending on the behavior of EXPRESSION.

The following example uses {{#}} and {{/}} to define a section that is rendered conditionally by the if helper:

import {stache} from "can";

const view = stache(`<div>
  {{# if(this.day) }}
    Good Morning!
  {{/ if }}
  </div>`);

var fragment = view({day: true});
console.log(fragment.firstChild.innerHTML) //-> "Good Morning!"

document.body.appendChild(fragment);

Different helpers can render these sections multiple times. {{else}} also defines a FALSY section that helpers can call. In the following, for(of) calls the FALSY section:

import {stache} from "can";

const view = stache(`<ul>
  {{# for(value of values) }}
    <li>{{ value }}<li>
  {{ else }}
    <li>no values<li>
  {{/ for }}
  </ul>`);

var fragment = view({values: []});
console.log(fragment.firstChild.innerHTML) //-> "<li>no values</li>"

document.body.appendChild(fragment);

Helpers can control the variables and context accessible in the TRUTHY and FALSY section. Read addHelper and addLiveHelper on how to do this with your own helpers.

{{# KEY_EXPRESSION }} TRUTHY {{else}} FALSY {{/KEY_EXPRESSION}}

Renders the FN or INVERSE section one or many times depending on the value in KEY_EXPRESSION.

If KEY_EXPRESSION returns an array like object, the FN section will be rendered for each item in the array. If the array like object is empty, the INVERSE section will be rendered. The {{#each(expression)}} helper should generally be used for observable array-like objects as it has some performance advantages.

{{#items}}<li>{{name}}</li>{{/items}}

If KEY_EXPRESSION returns a truthy value, the FN section will be rendered with the truthy value.

If KEY_EXPRESSION returns a fasley value, the INVERSE section will be rendered with the fasley value.

{{#address}} {{street}} {{city}} {{/address}}

The closing tag can end with {{/}}.

{{# if(this.day) }}
  Good Morning!
{{/ if }}

if(this.day) {
    console.log( "Good Morning!" );
}