can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - {{#each expression}}</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="./static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" parent expanded"> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> <ul> <li class=" "> <a class="module" href="can-component.html" title="Create a custom element that can be used to manage widgets or application logic."> can-component </a> </li> <li class=" "> <a class="module" href="can-compute.html" title="Create an observable value."> can-compute </a> </li> <li class=" "> <a class="module" href="can-connect.html" title="can-connect provides persisted data middleware. Use it to assemble powerful model layers for any JavaScript project."> can-connect </a> </li> <li class=" "> <a class="module" href="can-define.html" title="Exports the define method that defines observable properties and their behavior on a prototype object."> can-define </a> </li> <li class=" "> <a class="module" href="can-define/list/list.html" title="Create observable lists."> can-define/list/list </a> </li> <li class=" "> <a class="module" href="can-define/map/map.html" title="Create observable objects."> can-define/map/map </a> </li> <li class=" "> <a class="function" href="can-route.html" title="Manage browser history and client state by synchronizing the window.location.hash with a map."> can-route </a> </li> <li class=" "> <a class="module" href="can-route-pushstate.html" title="Changes can-route to use pushstate to change the window's pathname instead of the hash. var route = require("can-route-pushstate"); route("{page}", { page: "home" }); route.ready(); route.attr("page", "user"); location.pathname; // -> "/user""> can-route-pushstate </a> </li> <li class=" "> <a class="module" href="can-set.html" title="can-set is a utility for comparing sets that are represented by the parameters commonly passed to service requests."> can-set </a> </li> <li class=" parent expanded"> <a class="module" href="can-stache.html" title="Live binding Mustache and Handlebars-compatible templates."> can-stache </a> <ul> <li> <span>Pages</span> <ul> <li class=" "> <a class="page" href="can-stache.magicTagTypes.html" title=""> Magic Tag Types </a> </li> <li class=" "> <a class="page" href="can-stache.scopeAndContext.html" title=""> Scope and Context </a> </li> <li class=" "> <a class="page" href="can-stache.expressions.html" title="In addition to different magic tag types, stache supports different expression types. These can be used in various combinations to call helper methods or viewModel methods. The following is an example of all the expressions combined:"> Expressions </a> </li> <li class=" "> <a class="page" href="can-stache.Acquisition.html" title="There are number of ways to acquire templates such as: raw text, a module loader, or script tags in the markup."> Template Acquisition </a> </li> <li class=" "> <a class="page" href="can-stache.Helpers.html" title="Helpers are functions that can be registered and called from within templates. These functions are typically used to provide functionality that is more appropriate for the view than the viewModel."> Helpers </a> </li> <li class=" "> <a class="page" href="can-stache.Binding.html" title="Live binding refers to templates which update themselves when their state or data changes. can-stache templates are able to listen to observables (like map, list, and can-compute) changing and update the page to reflect those changes."> Live Binding </a> </li> </ul> </li> <li> <span>Methods</span> <ul> <li class=" "> <a class="function" href="can-stache.from.html" title="Return a template loaded from an element."> from </a> </li> <li class=" "> <a class="function" href="can-stache.registerConverter.html" title="Register a helper for bidirectional value conversion."> registerConverter </a> </li> <li class=" "> <a class="function" href="can-stache.registerHelper.html" title="Register a helper."> registerHelper </a> </li> <li class=" "> <a class="function" href="can-stache.registerPartial.html" title="Register a partial. Register a partial template that can be rendered with can-stache.tags.partial."> registerPartial </a> </li> <li class=" "> <a class="function" href="can-stache.registerSimpleHelper.html" title="Register a helper that gets passed values."> registerSimpleHelper </a> </li> <li class=" "> <a class="function" href="can-stache.safeString.html" title="Indicate that a string does not need to be escaped to be safely inserted into the page."> safeString </a> </li> </ul> </li> <li> <span>Tags</span> <ul> <li class=" "> <a class="function" href="can-stache.tags.escaped.html" title="Insert the value of the expression into the output of the template."> {{expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.tags.unescaped.html" title="Insert the unescaped value of the expression into the output of the template."> {{{expression}}} </a> </li> <li class=" "> <a class="function" href="can-stache.tags.section.html" title="Renders a subsection one or more times depending on the type of expression or the expression's return value."> {{#expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.tags.close.html" title=""> {{/expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.tags.inverse.html" title="Like can-stache.tags.section, but renders the opposite subsection depending on the type of expression or the expression's return value."> {{^expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.tags.partial.html" title="Render another template within the current template."> {{>key}} </a> </li> <li class=" "> <a class="function" href="can-stache.tags.comment.html" title="A comment that doesn't get inserted into the rendered result."> {{!expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.else.html" title=""> {{else}} </a> </li> </ul> </li> <li> <span>Expressions</span> <ul> <li class=" "> <a class="typedef" href="can-stache/expressions/bracket.html" title=""> Bracket Expression </a> </li> <li class=" "> <a class="typedef" href="can-stache/expressions/call.html" title=""> Call Expression </a> </li> <li class=" "> <a class="typedef" href="can-stache/expressions/hash.html" title=""> Hash Expression </a> </li> <li class=" "> <a class="typedef" href="can-stache/expressions/helper.html" title=""> Helper Expression </a> </li> <li class=" "> <a class="typedef" href="can-stache/expressions/key-lookup.html" title=""> KeyLookup Expression </a> </li> <li class=" "> <a class="typedef" href="can-stache/expressions/literal.html" title="Specify a JavaScript primitive type."> Literal Expression </a> </li> </ul> </li> <li> <span>Key Operators</span> <ul> <li class=" "> <a class="typedef" href="can-stache/keys/at.html" title="Return whatever value is at a key, regardless if it's a function or a compute."> @at </a> </li> <li class=" "> <a class="typedef" href="can-stache/keys/compute.html" title="Pass a compute instead of a value if an observable is found within calls."> ~compute </a> </li> <li class=" "> <a class="typedef" href="can-stache/keys/current.html" title="Lookup a value in only the current context."> ./current </a> </li> <li class=" "> <a class="typedef" href="can-stache/keys/parent.html" title="Start looking for values in the parent context."> ../parent </a> </li> <li class=" "> <a class="typedef" href="can-stache/keys/special.html" title="Event bindings and some helpers like can-stache.helpers.each provide special values that start with % to prevent potential collisions with other values."> %special </a> </li> <li class=" "> <a class="typedef" href="can-stache/keys/this.html" title="Write out or return the current context."> this </a> </li> <li class=" "> <a class="typedef" href="can-stache/keys/variable.html" title="Store a variable local to the template."> *variable </a> </li> <li class=" "> <a class="typedef" href="can-stache.key.html" title="A named reference to a value in the scope or helper scope in a template."> key </a> </li> </ul> </li> <li> <span>Helpers</span> <ul> <li class=" "> <a class="function" href="can-stache.helpers.if.html" title="can-stache.helpers.if"> {{#if expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.unless.html" title=""> {{#unless expression}} </a> </li> <li class="current parent expanded"> <a class="function" href="can-stache.helpers.each.html" title=""> {{#each expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.with.html" title="Changes the context within a block."> {{#with expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.log.html" title=""> {{log}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.is.html" title="Render something if two values are equal."> {{#is expressions}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.switch.html" title=""> {{#switch expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.case.html" title=""> {{#case expression}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.default.html" title=""> {{#default}} </a> </li> <li class=" "> <a class="function" href="can-stache.helpers.joinBase.html" title=""> {{joinBase expressions}} </a> </li> </ul> </li> <li> <span>Types</span> <ul> <li class=" "> <a class="typedef" href="can-stache.getterSetter.html" title="The getterSetter argument passed to registerConverter."> getterSetter </a> </li> <li class=" "> <a class="typedef" href="can-stache.helper.html" title="A helper function passed to can-stache.registerHelper. Given the arguments, returns the content that should be shown in the DOM or a function that will be called on the DOM element the helper was called on."> helper </a> </li> <li class=" "> <a class="typedef" href="can-stache.helperOptions.html" title="The options argument passed to a helper function when called by a helper."> helperOptions </a> </li> <li class=" "> <a class="typedef" href="can-stache.renderer.html" title="A function returned by can-stache that renders a template into an html documentFragment."> renderer </a> </li> <li class=" "> <a class="typedef" href="can-stache.sectionRenderer.html" title="Renders a section. These functions are usually provided as .fn and .inverse on a stache helper's options."> sectionRenderer </a> </li> <li class=" "> <a class="typedef" href="can-stache.simpleHelper.html" title="A helper function passed to can-stache.registerSimpleHelper."> simpleHelper </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="can-stache/helpers/route.html" title="Adds stache helpers that use can-route."> can-stache/helpers/route </a> </li> <li class=" "> <a class="module" href="can-stache-bindings.html" title="Provides template event, one-way, and two-way bindings."> can-stache-bindings </a> </li> </ul> </li> <li class=" "> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> </li> <li class=" "> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </li> <li class=" "> <a class="page" href="can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../index.html">CanJS</a></li> / <li><a href="can-core.html">Core</a></li> / <li><a href="can-stache.html">can-stache</a></li> / <li><a href="can-stache.helpers.each.html">{{#each expression}}</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>{{#each expression}}</h1> <div>function</div> </div> <section class="description"> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/can-stache/tree/v3.0.8/docs/helpers/each.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>{{#each EXPRESSION}}FN{{else}}INVERSE{{/each}}</code> </h2> <p>Render <code>FN</code> for each item in <code>EXPRESSION</code>'s return value. If <code>EXPRESSION</code> is falsey or an empty list, render <code>INVERSE</code>.</p> <pre><code>{{#each todos}} <li>{{name}}</li> {{else}} <li>No todos, rest easy!</li> {{/each}} </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>EXPRESSION</b> <code>{<a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a>|<a href="can-stache/expressions/call.html" title="">Call Expression</a>}</code>: <p>An expression that typically returns a list like data structure.</p> <p>If the value of the EXPRESSION is a <a href="can-define/list/list.html" title="Create observable lists.">can-define/list/list</a> or <a href="can-list.html" title="">can-list</a>, 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 <a href="can-util/js/diff/diff.html" title="can-util/js/diff/diff">diff</a> will be performed, which also will perform a minimal set of updates. The <a href="can-stache/keys/special.html" title="Event bindings and some helpers like can-stache.helpers.each provide special values that start with % to prevent potential collisions with other values.">special %key key</a> is available within <code>FN</code>.</p> <p>If the value of the key is an object, <code>FN</code> will be called for each property on the object. The <a href="can-stache/keys/special.html" title="Event bindings and some helpers like can-stache.helpers.each provide special values that start with % to prevent potential collisions with other values.">special %key key</a> is available within <code>FN</code>.</p> </li> <li><b>FN</b> <code>{<a href="can-stache.sectionRenderer.html" title="Renders a section. These functions are usually provided as .fn and .inverse on a stache helper's options.">sectionRenderer</a>(context, helpers)}</code>: <p>A subsection that will be rendered with each item in <code>EXPRESSION</code> or property value in <code>EXPRESSION</code>.</p> </li> <li><b>INVERSE</b> <code>{<a href="can-stache.sectionRenderer.html" title="Renders a section. These functions are usually provided as .fn and .inverse on a stache helper's options.">sectionRenderer</a>(context, helpers)}</code>: <p>An optional subsection that will be rendered if <code>EXPRESSION</code> is falsey or an empty list or object.</p> </li> </ol> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>{{#each EXPRESSION as KEY}}FN{{else}}INVERSE{{/each}}</code> </h2> <p>Like a normal <code>{{#each EXPRESSION}}</code>, but adds each item in <code>EXPRESSION</code> as <code>KEY</code> in <code>FN</code>'s <a href="can-view-scope.html" title="Create a lookup node for keys.">can-view-scope</a>.</p> <pre><code>{{#each todos as todo}} <li>{{todo.name}}</li> {{/each}} </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>EXPRESSION</b> <code>{<a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a>|<a href="can-stache/expressions/call.html" title="">Call Expression</a>}</code>: <p>An expression that returns a list or object like data structure.</p> </li> <li><b>key</b> <code>{<a href="can-stache.key.html" title="A named reference to a value in the scope or helper scope in a template.">key</a>}</code>: <p>The name that:</p> <ul> <li>each item in <code>EXPRESSION</code>'s list, or</li> <li>each property value in <code>EXPRESSION</code>'s object should take on in <code>FN</code>.</li> </ul> </li> <li><b>FN</b> <code>{<a href="can-stache.sectionRenderer.html" title="Renders a section. These functions are usually provided as .fn and .inverse on a stache helper's options.">sectionRenderer</a>(context, helpers)}</code>: <p>A subsection that will be rendered with each item in <code>EXPRESSION</code> or property value in <code>EXPRESSION</code>.</p> </li> <li><b>INVERSE</b> <code>{<a href="can-stache.sectionRenderer.html" title="Renders a section. These functions are usually provided as .fn and .inverse on a stache helper's options.">sectionRenderer</a>(context, helpers)}</code>: <p>An optional subsection that will be rendered if <code>EXPRESSION</code> is falsey or an empty list or object.</p> </li> </ol> </div> </div> <section class="body"> <h2>Use</h2> <p>Use the <code>each</code> helper to iterate over a array of items and render the block between the helper and the slash. For example,</p> <p>The template:</p> <pre><code><ul> {{#each friends}} <li>{{name}}</li> {{/each}} </ul> </code></pre> <p>Rendered with:</p> <pre><code>{friends: [{name: "Austin"},{name: "Justin"}]} </code></pre> <p>Renders:</p> <pre><code><ul> <li>Austin</li> <li>Justin</li> </ul> </code></pre> <h2>Object iteration</h2> <p>When iterating over <a href="can-map.html" title="Create observable objects.">can-map</a> it will only iterate over the map's <a href="can-map.keys.html" title="Returns an array of the map's keys.">keys</a> and none of the hidden properties of a Map. For example,</p> <p>The template:</p> <pre><code><ul> {{#each person}} <li>{{.}}</li> {{/each}} </ul> </code></pre> <p>Rendered with:</p> <pre><code>{person: {name: 'Josh', age: 27}} </code></pre> <p>Renders:</p> <pre><code><ul> <li>Josh</li> <li>27</li> </ul> </code></pre> <h2>Understanding when to use #each with lists</h2> <p><code>{{#each key}}</code> iteration will do basic diffing and aim to only update the DOM where the change occurred. Whereas <a href="can-stache.tags.section.html" title="Renders a subsection one or more times depending on the type of expression or the expression's return value.">{{#expression}}</a> default iteration will re-render the entire section for any change in the list. <a href="can-stache.tags.section.html" title="Renders a subsection one or more times depending on the type of expression or the expression's return value.">{{#expression}}</a> iteration is the preferred method to use when a list is replaced or changing significantly. When doing single list item changes frequently, <code>{{#each expression}}</code> iteration is the faster choice.</p> <p>For example, assuming "list" is a <a href="can-define/list/list.html" title="Create observable lists.">can-define/list/list</a> instance:</p> <p><code>{{#each list}}</code> and <code>{{#list}}</code> both iterate through an instance of <a href="can-define/list/list.html" title="Create observable lists.">can-define/list/list</a>, however we setup the bindings differently.</p> <p><code>{{#each list}}</code> will setup bindings on every individual item being iterated through, while <code>{{#list}}</code> will not. This makes a difference in two scenarios:</p> <ol> <li><p>You have a large list, with minimal updates planned after initial render. In this case, <code>{{#list}}</code> might be more advantageous as there will be a faster initial render. However, if any part of the list changes, the entire <code>{{#list}}</code> area will be re-processed.</p></li> <li><p>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 <code>{{#each list}}</code>, 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.</p></li> </ol> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-stache/docs/helpers/each.md"},"description":"\n","title":"{{#each expression}}","name":"can-stache.helpers.each","type":"function","parent":"can-stache.htags","order":5,"signatures":[{"code":"{{#each EXPRESSION}}FN{{else}}INVERSE{{/each}}","description":"\n\nRender `FN` for each item in `EXPRESSION`'s return value. If `EXPRESSION`\nis falsey or an empty list, render `INVERSE`.\n\n```\n{{#each todos}}\n <li>{{name}}</li>\n{{else}}\n <li>No todos, rest easy!</li>\n{{/each}}\n```\n","params":[{"types":[{"type":"can-stache/expressions/key-lookup"},{"type":"can-stache/expressions/call"}],"name":"EXPRESSION","description":"An\nexpression that typically returns a list like data structure.\n\nIf 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\nelement changes occur. The list itself can also change, and a [can-util/js/diff/diff]\nwill be performed, which also will perform a minimal set of updates. The [can-stache/keys/special special %key key] is available within `FN`.\n\nIf the value of the key is an object, `FN` will be\ncalled for each property on the object. The [can-stache/keys/special special %key key]\nis available within `FN`.\n"},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"FN","description":"A subsection that will be rendered with each\nitem in `EXPRESSION` or property value in `EXPRESSION`.\n"},{"types":[{"type":"can-stache.sectionRenderer"}],"optional":true,"name":"INVERSE","description":"An optional subsection that will be rendered\nif `EXPRESSION` is falsey or an empty list or object.\n"}]},{"code":"{{#each EXPRESSION as KEY}}FN{{else}}INVERSE{{/each}}","description":"\n\nLike a normal `{{#each EXPRESSION}}`, but adds each item in `EXPRESSION` as\n`KEY` in `FN`'s [can-view-scope].\n\n```\n{{#each todos as todo}}\n <li>{{todo.name}}</li>\n{{/each}}\n```\n","params":[{"types":[{"type":"can-stache/expressions/key-lookup"},{"type":"can-stache/expressions/call"}],"name":"EXPRESSION","description":"An\nexpression that returns a list or object like data structure.\n"},{"types":[{"type":"can-stache.key"}],"name":"key","description":"The name that:\n - each item in `EXPRESSION`'s list, or\n - each property value in `EXPRESSION`'s object\nshould take on in `FN`.\n"},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"FN","description":"A subsection that will be rendered with each\nitem in `EXPRESSION` or property value in `EXPRESSION`.\n"},{"types":[{"type":"can-stache.sectionRenderer"}],"optional":true,"name":"INVERSE","description":"An optional subsection that will be rendered\nif `EXPRESSION` is falsey or an empty list or object.\n\n"}]}],"_curParam":{"types":[{"type":"can-stache.sectionRenderer"}],"optional":true,"name":"INVERSE","description":"An optional subsection that will be rendered\nif `EXPRESSION` is falsey or an empty list or object.\n\n"},"comment":" ","pathToRoot":".."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="./static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>