DoneJS StealJS jQuery++ FuncUnit DocumentJS
5.33.3
6.0.0 4.3.0 3.14.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-stache
        • Tags
          • {{expression}}
          • {{{expression}}}
          • {{#expression}}
          • {{/expression}}
          • {{else}}
          • {{<partialName}}
          • {{!expression}}
          • {{-expression-}}
        • Helpers
          • and
          • console
          • debugger
          • domData
          • eq
          • for(of)
          • portal
          • if
          • joinBase
          • let
          • not
          • or
          • switch
          • case
          • default
        • Expressions
          • Bracket Expression
          • Call Expression
          • Hash Expression
          • KeyLookup Expression
          • Literal Expression
        • Methods
          • addBindings
          • addConverter
          • addHelper
          • addLiveHelper
          • from
          • safeString
        • Key Operators
          • ~compute
          • ./current
          • ../parent
          • scope
          • scope/key
          • this
          • key
        • Pages
          • Expressions
          • Helpers
        • Types
          • getterSetter
          • helper
          • helperOptions
          • sectionRenderer
          • simpleHelper
          • view
        • Deprecated
          • Helper Expression
          • scope.vars
          • {{data name}}
          • {{#each(expression)}}
          • {{#is(expressions)}}
          • {{#unless(expression)}}
          • {{#with(expression)}}
          • registerConverter
          • registerHelper
          • registerPartial
          • Legacy Scope Behavior
          • {{^expression}}
          • {{>key}}
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-tag
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

for(of)

  • Edit on GitHub

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

  1. 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 }}
    
  2. 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.

  3. 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.

  4. 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>

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 5.33.3.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news