can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - Sections</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> </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="can-stache.Sections.html">Sections</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>Sections</h1> <div>page</div> </div> <section class="description"> <p>Sections (<code><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.">{{#key}}</a></code> followed by <code><a href="can-stache.tags.close.html" title="">{{/key}}</a></code>) have multiple uses depending on what type of object is passed to the section. In all cases, using a section will change the current [can-stache.context context].</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/canjs/tree/v3.0.0/node_modules/can-stache/docs/sections.md">source</a></li>   </ul> </section> <section class="body"> <p>The most basic form of section will simply render a section of code if the key referenced is considered <strong>truthy</strong> (has a value):</p> <pre><code>Template: Hello! {{#person}} {{name}} {{/person}} Data: { person: { name: "Andy" } } Result: Hello! Andy </code></pre> <p>Whenever the key doesn't exist or the value is <strong>falsey</strong>, the section won't be rendered:</p> <pre><code>Template: Hello! {{#person}} {{name}} {{/person}} Data: {} Result: Hello! </code></pre> <p>However, this scenario can be covered through the use of an inverse section (<code><a 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.">{{^key}}</a></code> followed by <code><a href="can-stache.tags.close.html" title="">{{/key}}</a></code>):</p> <pre><code>Template: Hello! {{#person}} {{name}} {{/person}} {{^person}} No one is here. {{/person}} Data: {} Result: Hello! No one is here. </code></pre> <h2>Iteration</h2> <p>There is a special case for sections where the key references an array. In this case, the section iterates the entire array, rendering the inner text for each item in the array. Arrays are considered <strong>truthy</strong> if they aren't empty. The <code>{{.}}</code> tag will reference the current item within the array during iteration (which is primarily used when the items in the array are primitives like strings and numbers).</p> <pre><code>Template: {{#people}} {{.}} {{/people}} Data: { people: ["Andy", "Austin", "Justin"] } Result: Andy Austin Justin </code></pre> <h2>Understanding when to use Sections with lists</h2> <p>Section iteration will re-render the entire section for any change in the list. It is the prefered method to use when a list is replaced or changing significantly. Whereas <a href="can-stache.helpers.each.html" title="">{{#each key}}</a> iteration will do basic diffing and aim to only update the DOM where the change occured. When doing single list item changes frequently, <a href="can-stache.helpers.each.html" title="">{{#each key}}</a> iteration is the faster choice.</p> <p>For example, assuming "list" is a <a href="can-list.html" title="">can-list</a> instance:</p> <p>{{#if list}} will check for the truthy value of list. This is akin to checking for the truthy value of any JS object and will result to true, regardless of list contents or length.</p> <p>{{#if list.length}} will check for the truthy value of the length attribute. If you have an empty list, the length will be 0, so the #if will result to false and no contents will be rendered. If there is a length >= 1, this will result to true and the contents of the #if will be rendered.</p> <p>{{#each list}} and {{#list}} both iterate through an instance of <a href="can-list.html" title="">can-list</a>, however we setup the bindings differently.</p> <p>{{#each list}} will setup bindings on every individual item being iterated through, while {{#list}} 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, {{#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.</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 {{#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.</p></li> </ol> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-stache/docs/sections.md"},"description":"\nSections (`[can-stache.tags.section {{#key}}]` followed by `[can-stache.tags.close {{/key}}]`) have multiple uses \ndepending on what type of object is passed to the section. In all cases, using a section will change \nthe current [can-stache.context context].\n","name":"can-stache.Sections","title":"Sections","type":"page","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>