can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - {{#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="current parent expanded"> <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=" "> <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.tags.section.html">{{#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>{{#expression}}</h1> <div>function</div> </div> <section class="description"> <p>Renders a subsection one or more times depending on the type of expression or the expression's return value.</p> </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/tags/section.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>{{#KEY_EXPRESSION}}FN{{else}}INVERSE{{/KEY_EXPRESSION}}</code> </h2> <p>Renders the <code>FN</code> or <code>INVERSE</code> section one or many times depending on the value in <code>KEY_EXPRESSION</code>.</p> <p>If <code>KEY_EXPRESSION</code> returns an <a href="can-util/js/is-array-like/is-array-like.html" title="can-util/js/is-array-like/is-array-like">array like object</a>, the <code>FN</code> section will be rendered for each item in the array. If the array like object is empty, the <code>INVERSE</code> section will be rendered. The <a href="can-stache.helpers.each.html" title="">{{#each expression}}</a> helper should generally be used for observable array-like objects as it has some performance advantages.</p> <pre><code>{{#items}}<li>{{name}}</li>{{/items}} </code></pre> <p>If <code>KEY_EXPRESSION</code> returns a truthy value, the <code>FN</code> section will be rendered with the truthy value.</p> <p>If <code>KEY_EXPRESSION</code> returns a fasley value, the <code>INVERSE</code> section will be rendered with the fasley value.</p> <pre><code>{{#address}} {{street}} {{city}} {{/address}} </code></pre> <p>The closing tag can end with <code>{{/}}</code>.</p> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>KEY_EXPRESSION</b> <code>{<a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a>}</code>: <p>A key expression. If there is no value in the scope of <code>keyOrHelper</code>, it will be treated as a <a href="can-stache/expressions/helper.html" title="">Helper Expression</a>.</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>The truthy subsection.</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 inverse section created by using <a href="can-stache.helpers.else.html" title="">{{else}}</a>.</p> </li> </ol> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>{{#CALL_EXPRESSION}}FN{{else}}INVERSE{{/CALL_EXPRESSION}}</code> </h2> <p>Works like <code>{{#KEY_EXPRESSION}}</code>, but uses the return value of the <code>CALL_EXPRESSION</code>.</p> <pre><code>{{#getTasksForPerson(person)}}<li>{{name}}</li>{{/getTasksForPerson}} </code></pre> <p>Typically, the closing tag only include the method name and not its parameters.</p> <p>The closing tag can end with <code>{{/}}</code>.</p> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>CALL_EXPRESSION</b> <code>{<a href="can-stache/expressions/call.html" title="">Call Expression</a>}</code>: <p>A function that will be called with any specified arguments.</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>The truthy subsection.</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 inverse section created by using <a href="can-stache.helpers.else.html" title="">{{else}}</a>.</p> </li> </ol> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>{{#HELPER_EXPRESSION}}FN{{else}}INVERSE{{/HELPER_EXPRESSION}}</code> </h2> <p>Calls a <a href="can-stache.registerHelper.html" title="Register a helper.">registered helper</a> or a function in the <a href="can-view-scope.html" title="Create a lookup node for keys.">can-view-scope</a> with an additional <a href="can-stache.helperOptions.html" title="The options argument passed to a helper function when called by a helper.">helperOptions</a> argument that can call the <code>FN</code> or <code>INVERSE</code> helpers to build the content that should replace these tags.</p> <pre><code><p>{{#countTo number}}{{num}}{{/countTo}}</p> </code></pre> <p>Helpers, with their direct access to subsection renderers and scope have more control over template flow. However, they are harder to test than methods in the view model or model.</p> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>HELPER_EXPRESSION</b> <code>{<a href="can-stache/expressions/helper.html" title="">Helper Expression</a>}</code>: <p>Calls a helper method or function in the <a href="can-view-scope.html" title="Create a lookup node for keys.">can-view-scope</a> with specified arguments.</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>The truthy subsection.</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 inverse section created by using <a href="can-stache.helpers.else.html" title="">{{else}}</a>.</p> </li> </ol> </div> </div> <section class="body"> <h2>Use</h2> <p>The following breaks down the behavior of <code>{{#expression}}</code>. It groups the behavior of <a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a> and <a href="can-stache/expressions/call.html" title="">Call Expression</a>s because their behavior works the same way. It then details how <a href="can-stache/expressions/helper.html" title="">Helper Expression</a>s work.</p> <h2>KeyLookup and Call expressions</h2> <p>Sections contain text blocks and evaluate whether to render it or not. If the object evaluates to an array it will iterate over it and render the block for each item in the array. There are four different types of sections.</p> <h3>Falseys or Empty Arrays</h3> <p>If the value returns a <code>false</code>, <code>undefined</code>, <code>null</code>, <code>""</code> or <code>[]</code> we consider that a <em>falsey</em> value.</p> <p>If the value is falsey, the section will <strong>NOT</strong> render the block.</p> <pre><code>{ friends: false } {{#friends}} Never shown! {{/friends}} </code></pre> <h3>Arrays</h3> <p>If the value is a non-empty array, sections will iterate over the array of items, rendering the items in the block.</p> <p>For example, a list of friends will iterate over each of those items within a section.</p> <pre><code>{ friends: [ { name: "Austin" }, { name: "Justin" } ] } <ul> {{#friends}} <li>{{name}}</li> {{/friends}} </ul> </code></pre> <p>would render:</p> <pre><code><ul> <li>Austin</li> <li>Justin</li> </ul> </code></pre> <p>Reminder: Sections will reset the current context to the value for which it is iterating. See the <a href="#Basics">basics of contexts</a> for more information.</p> <h3>Truthys</h3> <p>When the value is a non-falsey object but not a list, it is considered truthy and will be used as the context for a single rendering of the block.</p> <pre><code>{ friends: { name: "Jon" } } {{#friends}} Hi {{name}} {{/friends}} </code></pre> <p>would render:</p> <pre><code>Hi Jon! </code></pre> <h2>Helper expression</h2> <p>A helper like:</p> <pre><code class="language-js">stache.registerHelper('countTo', function(number, options){ var out = []; if(number > 0) { for(var i =1; i <= number; i++){ var docFrag = options.fn({num: i}); out.push( docFrag ); } return out; } else { return options.inverse({num: i}); } }); </code></pre> <p>Could be called like:</p> <pre><code><p> {{#countTo number}} {{num}} {{else}} Can't count to {{num}}! {{/countTo}} </p> </code></pre> <p>Called with data like:</p> <pre><code class="language-js">{number: 3} </code></pre> <p>Produces:</p> <pre><code><p> 1 2 3 </p> </code></pre> <p>Called with data like:</p> <pre><code>{number: -5} </code></pre> <p>Produces:</p> <pre><code><p> Can't count to -5! </p> </code></pre> <p>Notice how <code>options</code> has <code>.fn</code> and <code>.inverse</code>.</p> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-stache/docs/tags/section.md"},"description":"\nRenders a subsection one or more times depending on the type of expression\nor the expression's return value.\n","title":"{{#expression}}","name":"can-stache.tags.section","type":"function","parent":"can-stache.tags","order":3,"signatures":[{"code":"{{#KEY_EXPRESSION}}FN{{else}}INVERSE{{/KEY_EXPRESSION}}","description":"\n\nRenders the `FN` or `INVERSE` section one or many times depending on\nthe value in `KEY_EXPRESSION`.\n\nIf `KEY_EXPRESSION` returns an [can-util/js/is-array-like/is-array-like array like object],\nthe `FN` section will be rendered for each item in the array. If the array like object is\nempty, the `INVERSE` section will be rendered. The [can-stache.helpers.each] helper\nshould generally be used for observable array-like objects as it has some performance\nadvantages. \n\n```\n{{#items}}<li>{{name}}</li>{{/items}}\n```\n\nIf `KEY_EXPRESSION` returns a truthy value, the `FN` section will be rendered with\nthe truthy value.\n\nIf `KEY_EXPRESSION` returns a fasley value, the `INVERSE` section will be rendered with\nthe fasley value.\n\n```\n{{#address}} {{street}} {{city}} {{/address}}\n```\n\nThe closing tag can end with `{{/}}`.\n","params":[{"types":[{"type":"can-stache/expressions/key-lookup"}],"name":"KEY_EXPRESSION","description":"A key expression.\nIf there is no value in the scope of `keyOrHelper`, it will be treated as a [can-stache/expressions/helper]."},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"FN","description":"The truthy subsection."},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"INVERSE","description":"An optional inverse section created\nby using [can-stache.helpers.else].\n\n"}]},{"code":"{{#CALL_EXPRESSION}}FN{{else}}INVERSE{{/CALL_EXPRESSION}}","description":"\n\nWorks like `{{#KEY_EXPRESSION}}`, but uses the return value of\nthe `CALL_EXPRESSION`.\n\n```\n{{#getTasksForPerson(person)}}<li>{{name}}</li>{{/getTasksForPerson}}\n```\n\nTypically, the closing tag only include the method name and not its parameters.\n\nThe closing tag can end with `{{/}}`.\n","params":[{"types":[{"type":"can-stache/expressions/call"}],"name":"CALL_EXPRESSION","description":"A function that\nwill be called with any specified arguments."},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"FN","description":"The truthy subsection."},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"INVERSE","description":"An optional inverse section created\nby using [can-stache.helpers.else].\n\n"}]},{"code":"{{#HELPER_EXPRESSION}}FN{{else}}INVERSE{{/HELPER_EXPRESSION}}","description":"\n\nCalls a [can-stache.registerHelper registered helper] or a function in the\n[can-view-scope] with an additional [can-stache.helperOptions] argument\nthat can call the `FN` or `INVERSE` helpers to build the content that\nshould replace these tags.\n\n```\n<p>{{#countTo number}}{{num}}{{/countTo}}</p>\n```\n\nHelpers, with their direct access to subsection renderers and scope\nhave more control over template flow. However, they are harder to test\nthan methods in the view model or model.\n","params":[{"types":[{"type":"can-stache/expressions/helper"}],"name":"HELPER_EXPRESSION","description":"Calls a helper method\nor function in the [can-view-scope] with specified arguments."},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"FN","description":"The truthy subsection."},{"types":[{"type":"can-stache.sectionRenderer"}],"name":"INVERSE","description":"An optional inverse section created\nby using [can-stache.helpers.else].\n"}]}],"_curParam":{"types":[{"type":"can-stache.sectionRenderer"}],"name":"INVERSE","description":"An optional inverse section created\nby using [can-stache.helpers.else].\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>