DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 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-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
        • Pages
          • Magic Tag Types
          • Scope and Context
          • Expressions
          • Template Acquisition
          • Helpers
          • Live Binding
          • Whitespace Control
          • Sections
        • Methods
          • addHelper
          • addLiveHelper
          • from
          • registerConverter
          • registerHelper
          • registerPartial
          • registerSimpleHelper
          • safeString
        • Tags
          • {{expression}}
          • {{{expression}}}
          • {{#expression}}
          • {{/expression}}
          • {{^expression}}
          • {{>key}}
          • {{!expression}}
          • {{<partialName}}
          • {{else}}
        • Expressions
          • Bracket Expression
          • Call Expression
          • Hash Expression
          • Helper Expression
          • KeyLookup Expression
          • Literal Expression
        • Key Operators
          • @at
          • ~compute
          • ./current
          • ../parent
          • scope
          • %special
          • this
          • *variable
          • *self
          • key
        • Helpers
          • {{#if(expression)}}
          • {{#unless(expression)}}
          • {{#each(expression)}}
          • {{#with(expression)}}
          • {{log()}}
          • {{debugger()}}
          • {{#eq(expressions)}}
          • {{#is(expressions)}}
          • {{#switch(expression)}}
          • {{#case(expression)}}
          • {{#default()}}
          • {{joinBase(expressions)}}
        • Types
          • getterSetter
          • helper
          • helperOptions
          • renderer
          • sectionRenderer
          • simpleHelper
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-namespace
      • can-reflect
      • 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

{{#each(expression)}}

  • Edit on GitHub

Deprecated 3.9

The as keyword signature, {{#each EXPRESSION as KEY}}FN{{else}}INVERSE{{/each}}, is deprecated in favor of Hash Expressions like {{#each(EXPRESSION, KEY=value)}}FN{{else}}INVERSE{{/each}}.

{{#each(EXPRESSION)}}FN{{else}}INVERSE{{/each}}

Render FN for each item in EXPRESSION’s return value. If EXPRESSION is falsey or an empty list, render INVERSE.

{{#each(todos)}}
  <li>{{name}}</li>
{{else}}
  <li>No todos, rest easy!</li>
{{/each}}

Parameters

  1. EXPRESSION {KeyLookup Expression|Call Expression}:

    An expression that typically returns a list like data structure.

    If the value of the EXPRESSION is a can-define/list/list or can-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 diff will be performed, which also will perform a minimal set of updates. The special %key key is available within FN.

    If the value of the key is an object, FN will be called for each property on the object. The special %key key is available within FN.

  2. FN {sectionRenderer(context, helpers)}:

    A subsection that will be rendered with each item in EXPRESSION or property value in EXPRESSION.

  3. INVERSE {sectionRenderer(context, helpers)}:

    An optional subsection that will be rendered if EXPRESSION is falsey or an empty list or object.

{{#each(EXPRESSION, HASH_EXPRESSION)}}FN{{else}}INVERSE{{/each}}

Like a normal {{#each(EXPRESSION)}}, but uses Hash Expression to add the current value, key, or index to the current scope.

{{#each(todos, todo=value num=index)}}
    <li data-index="{{num}}">{{todo.name}}</li>
{{/each}}

Parameters

  1. EXPRESSION {KeyLookup Expression|Call Expression}:

    An expression that returns a list or object like data structure.

  2. HASH_EXPRESSION {Hash Expression}:

    A hash expression that aliases special properties for each iteration:

    • value: The current value
    • key: The key of the current object item
    • index: The index of the current array item
  3. FN {sectionRenderer(context, helpers)}:

    A subsection that will be rendered with each item in EXPRESSION or property value in EXPRESSION.

  4. INVERSE {sectionRenderer(context, helpers)}:

    An optional subsection that will be rendered if EXPRESSION is falsey or an empty list or object.

{{#each(EXPRESSION)}}FN{{else}}INVERSE{{/each}}

Like a normal {{#each(EXPRESSION)}}, but adds each item in EXPRESSION as KEY in FN’s can-view-scope.

{{#each(todos, todo=value)}}
    <li>{{todo.name}}</li>
{{/each}}

Parameters

  1. EXPRESSION {KeyLookup Expression|Call Expression}:

    An expression that returns a list or object like data structure.

  2. key {key}:

    The name that:

    • each item in EXPRESSION’s list, or
    • each property value in EXPRESSION’s object should take on in FN.
  3. FN {sectionRenderer(context, helpers)}:

    A subsection that will be rendered with each item in EXPRESSION or property value in EXPRESSION.

  4. INVERSE {sectionRenderer(context, helpers)}:

    An optional subsection that will be rendered if EXPRESSION is falsey or an empty list or object.

Use

Use the each helper to iterate over a array of items and render the block between the helper and the slash.

For example, this template:

<ul>
  {{#each(friends)}}
    <li>{{name}}</li>
  {{/each}}
</ul>

Rendered with:

{friends: [{name: "Austin"},{name: "Justin"}]}

Renders:

<ul>
  <li>Austin</li>
  <li>Justin</li>
</ul>

Object iteration

When iterating over can-map it will only iterate over the map’s keys and none of the hidden properties of a Map.

For example, this template:

<ul>
  {{#each(person)}}
    <li>{{.}}</li>
  {{/each}}
</ul>

Rendered with:

{person: {name: 'Josh', age: 27}}

Renders:

<ul>
  <li>Josh</li>
  <li>27</li>
</ul>

Understanding when to use #each with lists

{{#each(key)}} iteration will do basic diffing and aim to only update the DOM where the change occurred. Whereas {{#expression}} default iteration will re-render the entire section for any change in the list. {{#expression}} iteration is the preferred method to use when a list is replaced or changing significantly. When doing single list item changes frequently, {{#each(expression)}} iteration is the faster choice.

For example, assuming "list" is a can-define/list/list instance:

{{#each(list)}} and {{#list}} both iterate through an instance of can-define/list/list, however we setup the bindings differently.

{{#each(list)}} will setup bindings on every individual item being iterated through, while {{#list}} will not. This makes a difference in two scenarios:

  1. You have a large list, with minimal updates planned after initial render. In this case, {{#list}} might be more advantageous as there will be a faster initial render. However, if any part of the list changes, the entire {{#list}} area will be re-processed.

  2. You have a large list, with many updates planned after initial render. A grid with many columns of editable fields, for instance. In this case, you many want to use {{#each(list)}}, even though it will be slower on initial render (we’re setting up more bindings), you’ll have faster updates as there are now many sections.

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

On this page

Get help

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