Bitovi

for(of)

Loop through a list of values.

`{{# for( VARIABLE_NAME of EXPRESSION ) }}FN{{else}}INVERSE{{/ for}}`

for is used to to loop through a list of values and write out HTML for each value. for works by looping through each value returned by EXPRESSION and points a a local let-like variable named VARIABLE_NAME at each value.

import {stache} from "can";

var view = stache(`
  <ul>
      {{# for(item of this.values) }}
          <li>{{ item.name }}</li>
      {{/ for }}
  </ul>
`);

var data = {
  values: [
      {name: "first"},
      {name: "second"}
  ]
};

var frag = view(data);
console.log(frag.firstElementChild.innerHTML)
//-> <li>first</li><li>second</li>

document.body.appendChild(frag);

If an object of key-values are passed, the values of the object will be looped through. You can access the key with scope.key:

import {stache} from "can";

var view = stache(`
  <ul>
      {{# for(name of this.values) }}
          <li>{{scope.key}}: {{ name }}</li>
      {{/ for }}
  </ul>
`);

var data = {
  values: {
      first: "Hope",
      middle: "van",
      last: "Dyne"
  }
};

var frag = view(data);
console.log(frag.firstElementChild.innerHTML)
//-> <li>first: Hope</li><li>middle: van</li><li>last: Dyne</li>

document.body.appendChild(frag);

If the EXPRESSION is falsy or an empty object or list, the INVERSE section will be rendered:

import {stache} from "can";

var view = stache(`
  <ul>
      {{# for(name of this.values) }}
          <li>{{ item.name }}</li>
      {{ else }}
          <li>No items</li>
      {{/ for }}
  </ul>
`);

var data = {
  values: []
};

var frag = view(data);
console.log(frag.firstElementChild.innerHTML)
//-> <li>No items</li>

document.body.appendChild(frag);

Parameters

VARIABLE_NAME {VariableExpression}:
A local variable that will only be accessible to KeyLookups within the block. You can leave out the VARIABLE_NAME and of to loop through items in the object like:
```
{{# for( this.values ) }}
    <li>{{ scope.index }}</li>
{{/ for }}
```
EXPRESSION {KeyLookup Expression|Call Expression}:
An expression that typically returns a list like data structure. If the value of the EXPRESSION is an observable list (for example: can-define/list/list), the resulting HTML is updated when the list changes. When a change in the list happens, only the minimum amount of DOM element changes occur. The list itself can also change, and a difference will be performed, which also will perform a minimal set of updates.
FN {sectionRenderer(context, helpers)}:
A subsection that is rendered for each value in EXPRESSION. This subsection can access the value in EXPRESSION as VARIABLE_NAME.
INVERSE {sectionRenderer(context, helpers)}:
A subsection that is rendered if EXPRESSION evaluats to an empty list.

Use

for is used to render HTML for items in a list. It improves upon {{#each(expression)}} in that it does not change the scope. Notice that within the {{# for}} block, this still refers to the data passed to the view:

import {stache} from "can";

var view = stache(`
    <ul>
        {{# for(item of this.values) }}
            <li>{{this.dataName}}-{{ item.name }}</li>
        {{/ for }}
    </ul>
`);

var data = {
    values: [
        {name: "one"},
        {name: "two"}
    ],
    dataName: "number"
};

var frag = view(data);
document.body.appendChild(frag);

document.body.innerHTML
//-> <ul><li>number-one</li><li>number-two</li></ul>

for(of)

{{# for( VARIABLE_NAME of EXPRESSION ) }}FN{{else}}INVERSE{{/ for}}

Parameters

Use

Get help

`{{# for( VARIABLE_NAME of EXPRESSION ) }}FN{{else}}INVERSE{{/ for}}`