UNPKG

can

Version:

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

1,570 lines (957 loc) 37.6 kB
<!DOCTYPE html> <!--#################################################################### THIS IS A GENERATED FILE -- ANY CHANGES MADE WILL BE OVERWRITTEN INSTEAD CHANGE: source: [object Object] @function can-stache.tags.escaped ######################################################################## --> <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> &nbsp; </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&#x27;s pathname instead of the hash. var route = require(&quot;can-route-pushstate&quot;); route(&quot;{page}&quot;, { page: &quot;home&quot; }); route.ready(); route.attr(&quot;page&quot;, &quot;user&quot;); location.pathname; // -&gt; &quot;/user&quot;"> 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="current parent expanded"> <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&#x27;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&#x27;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."> {{&gt;key}} </a> </li> <li class=" "> <a class="function" href="can-stache.tags.comment.html" title="A comment that doesn&#x27;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&#x27;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&#x27;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.escaped.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>Insert the value of the expression into the output of the template.</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links"> <!-- <li><a href="#">docco</a></li> --> <li><a href="//github.com/canjs/can-stache/tree/v3.0.8/docs/tags/escaped.md">source</a></li> <!-- <li><a href="#">download</a></li> --> <!-- <li><a href="#">tests</a></li> --> </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>{{EXPRESSION}}</code> </h2> <p>Gets the value of <code>EXPRESSION</code> and inserts the result into the output of the template.</p> <p>If the expression is clearly of a particular expression type like: <code>{{myHelper arg}}</code> or <code>{{myMethod(arg)}}</code>, that expression's rules will be followed.</p> <p>An ambiguous expression type like <code>{{keyOrHelper}}</code> will first treat <code>keyOrHelper</code> as a <a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a> and 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> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>expression</b> <code>{<a href="can-stache/expressions/literal.html" title="Specify a JavaScript primitive type.">Literal Expression</a>|<a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a>|<a href="can-stache/expressions/call.html" title="">Call Expression</a>|<a href="can-stache/expressions/helper.html" title="">Helper Expression</a>}</code>: <p>The <code>expression</code> can be:</p> <ul> <li><a href="can-stache/expressions/literal.html" title="Specify a JavaScript primitive type.">Literal Expression</a> - <code>{{5}}</code> - Inserts a string representation of the literal.</li> <li><a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a> - <code>{{key}}</code> - Looks up the value of <code>key</code> in the <a href="can-view-scope.html" title="Create a lookup node for keys.">can-view-scope</a>.</li> <li><a href="can-stache/expressions/call.html" title="">Call Expression</a> - <code>{{method()}}</code> - Calls <code>method</code> in the <a href="can-view-scope.html" title="Create a lookup node for keys.">can-view-scope</a>.</li> <li><a href="can-stache/expressions/helper.html" title="">Helper Expression</a> - <code>{{helper arg}}</code> - Calls <code>helper</code> in the <a href="can-view-scope.Options.html" title="">Options</a> and passes it a <a href="can-stache.helperOptions.html" title="The options argument passed to a helper function when called by a helper.">helperOptions</a>.</li> </ul> </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> <h3>Key and Call Expressions</h3> <p><code>{{key}}</code> insert data into the template. It most commonly references values within the current context. For example:</p> <p>Rendering:</p> <pre><code>&lt;h1&gt;{{name}}&lt;/h1&gt; </code></pre> <p>With:</p> <pre><code>{name: &quot;Austin&quot;} </code></pre> <p>Results in:</p> <pre><code>&lt;h1&gt;Austin&lt;/h1&gt; </code></pre> <p>If the key value is a String or Number, it is inserted into the template. If it is <code>null</code> or <code>undefined</code>, nothing is added to the template.</p> <h3>Nested Properties</h3> <p>Stache supports nested paths, making it possible to look up properties nested deep inside the current context. For example:</p> <p>Rendering:</p> <pre><code>&lt;h1&gt;{{book.author}}&lt;/h1&gt; </code></pre> <p>With:</p> <pre><code>{ book: { author: &quot;Ernest Hemingway&quot; } } </code></pre> <p>Results in:</p> <pre><code>&lt;h1&gt;Ernest Hemingway&lt;/h1&gt; </code></pre> <h3>Looking up values in parent contexts</h3> <p>Sections and block helpers can create their own contexts. If a key's value is not found in the current context, it will look up the key's value in parent contexts. For example:</p> <p>Rendering:</p> <pre><code>{{#chapters}} &lt;li&gt;{{title}} - {{name}}&lt;/li&gt; {{chapters}} </code></pre> <p>With:</p> <pre><code>{ title: &quot;The Book of Bitovi&quot; chapters: [{name: &quot;Breakdown&quot;}] } </code></pre> <p>Results in:</p> <pre><code>&lt;li&gt;The Book of Bitovi - Breakdown&lt;/li&gt; </code></pre> <h2>Helper expressions</h2> <p>The <code>{{helper}}</code> syntax is used to call out to stache <a 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 functions</a> functions that may contain more complex functionality. <code>helper</code> is a <a href="can-stache.key.html" title="A named reference to a value in the scope or helper scope in a template.">key</a> that must match either:</p> <ul> <li>a <a href="can-stache.registerHelper.html" title="Register a helper.">registered helper function</a>, or</li> <li>a function in the current or parent <a href="can-stache.scopeAndContext.html" title="">contexts</a></li> </ul> <p>The following example shows both cases.</p> <p>The Template:</p> <pre><code>&lt;p&gt;{{greeting}} {{user}}&lt;/p&gt; </code></pre> <p>Rendered with data:</p> <pre><code>{ user: function(){ return &quot;Justin&quot; } } </code></pre> <p>And a with a registered helper like:</p> <pre><code>stache.registerHelper('greeting', function(){ return &quot;Hello&quot; }); </code></pre> <p>Results in:</p> <pre><code>&lt;p&gt;Hello Justin&lt;/p&gt; </code></pre> <h3>Arguments</h3> <p>Arguments can be passed from the template to helper function by listing space seperated strings, numbers or other <a href="can-stache.key.html" title="A named reference to a value in the scope or helper scope in a template.">keys</a> after the <code>helper</code> name. For example:</p> <p>The template:</p> <pre><code>&lt;p&gt;{{madLib &quot;Lebron James&quot; verb 4}}&lt;/p&gt; </code></pre> <p>Rendered with:</p> <pre><code>{verb: &quot;swept&quot;} </code></pre> <p>Will call a <code>madLib</code> helper with the following arguements:</p> <pre><code>stache.registerHelper('madLib', function(subject, verb, number, options){ // subject -&gt; &quot;Lebron James&quot; // verb -&gt; &quot;swept&quot; // number -&gt; 4 }); </code></pre> <p>If an argument <code>key</code> value is a <a href="can-map.html" title="Create observable objects.">can-map</a> property, the Observe's property is converted to a getter/setter <a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a>. For example:</p> <p>The template:</p> <pre><code>&lt;p&gt;What! My name is: {{mr user.name}}&lt;/p&gt; </code></pre> <p>Rendered with:</p> <pre><code>{user: new Map({name: &quot;Slim Shady&quot;})} </code></pre> <p>Needs the helper to check if name is a function or not:</p> <pre><code>stache.registerHelper('mr',function(name){ return &quot;Mr. &quot;+ (typeof name === &quot;function&quot; ? name(): name) }) </code></pre> <p>This behavior enables two way binding helpers and is explained in more detail on the <a 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 functions</a> docs.</p> <h3>Hash</h3> <p>If enumerated arguments isn't an appropriate way to configure the behavior of a helper, it's possible to pass a hash of key-value pairs to the <a href="can-stache.helperOptions.html" title="The options argument passed to a helper function when called by a helper.">helper option argument</a>'s hash object. Properties and values are specified as <code>hashProperty=hashValue</code>. For example:</p> <p>The template:</p> <pre><code>&lt;p&gt;My {{excuse who=pet how=&quot;shreded&quot;}}&lt;/p&gt; </code></pre> <p>` And the helper:</p> <pre><code>stache.registerHelper(&quot;excuse&quot;,function(options){ return [&quot;My&quot;, options.hash.who || &quot;dog&quot;. options.hash.how || &quot;ate&quot;, &quot;my&quot;, options.hash.what || &quot;homework&quot;].join(&quot; &quot;) }) </code></pre> <p>Render with:</p> <pre><code>{pet: &quot;cat&quot;} </code></pre> <p>Results in:</p> <pre><code>&lt;p&gt;My cat shareded my homework&lt;/p&gt; </code></pre> <h3>Returning an element callback function</h3> <p>If a helper returns a function, that function is called back after the template has been rendered into DOM elements. This can be used to create stache tags that have rich behavior. Read about it on the <a 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 function</a> page.</p> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-stache/docs/tags/escaped.md"},"description":"Insert the value of the expression into the output of the template.\n\n","title":"{{expression}}","name":"can-stache.tags.escaped","type":"function","parent":"can-stache.tags","order":0,"signatures":[{"code":"{{EXPRESSION}}","description":"\n\nGets the value of `EXPRESSION` and inserts the result into the output of the\ntemplate.\n\nIf the expression is clearly of a particular expression type like: `{{myHelper arg}}` or\n`{{myMethod(arg)}}`, that expression's rules will be followed.\n\nAn ambiguous expression type like `{{keyOrHelper}}` will first treat `keyOrHelper`\nas a [can-stache/expressions/key-lookup] and if there is no value in the scope of\n`keyOrHelper`, it will be treated as a [can-stache/expressions/helper].\n\n\n","params":[{"types":[{"type":"can-stache/expressions/literal"},{"type":"can-stache/expressions/key-lookup"},{"type":"can-stache/expressions/call"},{"type":"can-stache/expressions/helper"}],"name":"expression","description":"The `expression` can be:\n\n - [can-stache/expressions/literal] - `{{5}}` - Inserts a string representation of the literal.\n - [can-stache/expressions/key-lookup] - `{{key}}` - Looks up the value of `key` in the [can-view-scope].\n - [can-stache/expressions/call] - `{{method()}}` - Calls `method` in the [can-view-scope].\n - [can-stache/expressions/helper] - `{{helper arg}}` - Calls `helper` in the [can-view-scope.Options] and passes it a [can-stache.helperOptions].\n\n\n"}]}],"_curParam":{"types":[{"type":"can-stache/expressions/literal"},{"type":"can-stache/expressions/key-lookup"},{"type":"can-stache/expressions/call"},{"type":"can-stache/expressions/helper"}],"name":"expression","description":"The `expression` can be:\n\n - [can-stache/expressions/literal] - `{{5}}` - Inserts a string representation of the literal.\n - [can-stache/expressions/key-lookup] - `{{key}}` - Looks up the value of `key` in the [can-view-scope].\n - [can-stache/expressions/call] - `{{method()}}` - Calls `method` in the [can-view-scope].\n - [can-stache/expressions/helper] - `{{helper arg}}` - Calls `helper` in the [can-view-scope.Options] and passes it a [can-stache.helperOptions].\n\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>