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

for is used to to loop through:

• an array-like list of values

  {{# for(task of this.tasks) }} {{task.name}} {{/for}}
  

• keys in an object

  {{# for( this.task ) }} {{scope.key}} {{scope.value}} {{/for}}
  

• integers starting from 0

  {{# for( this.tasks.length ) }} {{scope.index}} {{/for}}
  

If an array-like list of values is passed, for loops 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 a positive integer value is passed, it will loop that number of times. You can access the current index with scope.index:

import {stache} from "can";

var view = stache(`
  <ul>
    {{# for(this.integerValue) }}
      <li>{{scope.index}}</li>
    {{/ for }}
  </ul>
`);

var data = {
  integerValue: 3
};

var frag = view(data);
console.log(frag.firstElementChild.innerHTML)
//-> <li>0</li><li>1</li><li>2</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);

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>