can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
1,601 lines (981 loc) • 36.1 kB
HTML
<!--####################################################################
THIS IS A GENERATED FILE -- ANY CHANGES MADE WILL BE OVERWRITTEN
INSTEAD CHANGE:
source: [object Object]
@page can-stache.expressions
######################################################################## -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>CanJS - Expressions</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="current
parent
expanded">
<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="
">
<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.expressions.html">Expressions</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>Expressions</h1>
<div>page</div>
</div>
<section class="description">
<p>In addition to different magic tag types, stache supports different expression
types. These can be used in various combinations to call <a href="can-stache.registerHelper.html" title="Register a helper.">helper methods</a>
or <a href="can-component.prototype.ViewModel.html" title="Provides or describes a constructor function that provides values and methods
to the component's template. The constructor function
is initialized with values specified by the component element's data bindings.">viewModel methods</a>. The following is an example of all the expressions
combined:</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/expressions/expressions.md">source</a></li>
<!-- <li><a href="#">download</a></li> -->
<!-- <li><a href="#">tests</a></li> -->
</ul>
</section>
<section class="body">
<pre><code>{{helper key1 "string" method(key2, 1, prop1=key3) prop2=key4}}
</code></pre>
<p>There are 6 expression types stache supports:</p>
<ul>
<li>Literal expressions like <code>{{"string"}}</code></li>
<li>KeyLookup expressions like <code>{{key}}</code></li>
<li>Hash expressions like <code>{{prop=key}}</code></li>
<li>Call expressions like <code>{{method(arg)}}</code></li>
<li>Helper expressions like <code>{{helper arg}}</code></li>
<li>Bracket expressions like <code>{{[key]}}</code></li>
</ul>
<h2>Literal expressions</h2>
<p>A <a href="can-stache/expressions/literal.html" title="Specify a JavaScript primitive type.">Literal Expression</a> specifies JS primitive values like:</p>
<ul>
<li>Strings <code>"strings"</code></li>
<li>Numbers <code>5</code></li>
<li>Booleans <code>true</code> or <code>false</code></li>
<li>And <code>null</code> or <code>undefined</code></li>
</ul>
<p>They are usually passed as arguments to Call or Helper expressions like:</p>
<pre><code>{{pluralize "dog" 2}}
{{task.filter("completed", true)}}
</code></pre>
<h2>KeyLookup expressions</h2>
<p>A <a href="can-stache/expressions/key-lookup.html" title="">KeyLookup Expression</a> specifies a value in the <a href="can-view-scope.html" title="Create a lookup node for keys.">scope</a> or
<a href="can-view-scope.Options.html" title="">HelperOptions scope</a> that will be looked up. KeyLookup expressions
can be the entire stache expression like:</p>
<pre><code>{{key}}
</code></pre>
<p>Or they can make up the method, helper, arguments, and hash value parts of
Call, Helper, and Hash expressions:</p>
<pre><code>{{method(arg1,arg2}} Call
{{helper arg1 arg2}} Helper
{{method( prop=hashValue )}} Hash
</code></pre>
<p>The value returned up by a KeyLookup depends on what the <a href="can-stache.key.html" title="A named reference to a value in the scope or helper scope in a template.">key</a> looks like, and
what expression type the KeyLookup is within.</p>
<p>For example, <code>{{method(~./key)}}</code> will call <code>method</code> with
a <a href="can-compute.computed.html" title="A derived value from other computes and observable maps.">compute</a> that looks up the value of <code>key</code> only in the top of the <a href="can-view-scope.html" title="Create a lookup node for keys.">scope</a>.</p>
<p>The rules are as follows:</p>
<ul>
<li><strong>call expression arguments</strong> <code>{{method(key)}}</code> - values are passed.</li>
<li><strong>helper expression arguments</strong> <code>{{helper key}}</code> - computes are passed.</li>
<li><strong>hash value in call expression</strong> <code>{{method(hash=key)}}</code> - values are set as property values.</li>
<li><strong>hash value in helper expression</strong> <code>{{method hash=key}}</code> - computes are set as property values.</li>
<li><strong>special operator</strong> <code>{{%index}}</code> - lookup values in a special context provided by some helpers.</li>
<li><strong>compute operator</strong> <code>{{method(~key)}}</code> - pass a compute instead of a value.</li>
<li><strong>at operator</strong> <code>{{method(@key}}</code> - pass a function instead of trying to read the value of the function.</li>
<li><strong>current context</strong> <code>{{./key}}</code> - only lookup key at the top of the scope.</li>
<li><strong>parent context</strong> <code>{{../key}}</code> - lookup the value in the parent context.</li>
<li><strong>context</strong> <code>{{.}}</code> - return the current context/top of the scope.</li>
</ul>
<h2>Hash expressions</h2>
<p>A <a href="can-stache/expressions/hash.html" title="">Hash Expression</a> specifies a property value on a object argument in a call expression
and property value on the the hash object in a helper expression's <a href="can-stache.helperOptions.html" title="The options argument passed to a helper function when called by a helper.">helperOptions</a> argument.</p>
<p>For example, in a call expression:</p>
<pre><code>Template:
{{methodA(prop=key)}}
{{methodB(propX=key propY='literal', propZ=5)}}
Data:
{
methodA: function(arg){},
methodB: function(arg1, arg2),
key: compute("value")
}
</code></pre>
<ul>
<li><code>methodA</code> will be called with <code>{prop: "value"}</code> as <code>arg</code>.</li>
<li><code>methodB</code> will be called with <code>{propX: "value", propY: 'literal'}</code> as <code>arg1</code> and <code>{propZ: 5}</code> as <code>arg2</code></li>
</ul>
<p>In a helper expression:</p>
<pre><code>Template:
{{methodA prop=key}}
{{methodB(propX=key propY='literal' propZ=5)}}
Data:
{
methodA: function(options){},
methodB: function(options){},
key: compute("value")
}
</code></pre>
<ul>
<li><code>methodA</code> will be called with <code>{prop: compute("value")}</code> as <code>options.hash</code>.</li>
<li><code>methodB</code> will be called with <code>{propX: "value", propY: 'literal', propZ: 5}</code> as <code>options.hash</code>.</li>
</ul>
<h2>Call expressions</h2>
<p>A <a href="can-stache/expressions/call.html" title="">Call Expression</a> calls a function looked up in the <a href="can-view-scope.html" title="Create a lookup node for keys.">scope</a> followed by
the <a href="can-view-scope.Options.html" title="">helpers scope</a>. It looks like:</p>
<pre><code>Template:
<h1>{{pluralize(type, ages.length)}}</h1>
Data:
{
pluralize: function(type, count){
return type+(count === 1 ? "" : "s")
},
todos: new List([22,32,42]),
type: "age"
}
Result:
<h1>Ages</h1>
</code></pre>
<p>Call expression arguments are comma (,) separated. If a Hash expression is an argument,
an object with the hash properties and values will be passed. For example:</p>
<pre><code>Template:
<h1>{{pluralize(word=type count=ages.length)}}</h1>
Data:
{
pluralize: function(options){
return options.word+(options.count === 1 ? "" : "s")
},
todos: new List([22,32,42]),
type: "age"
}
Result:
<h1>Ages</h1>
</code></pre>
<h2>Helper expressions</h2>
<p>A <a href="can-stache/expressions/helper.html" title="">Helper Expression</a> calls a function looked up in the <a href="can-view-scope.Options.html" title="">helpers scope</a> followed by
the <a href="can-view-scope.html" title="Create a lookup node for keys.">scope</a>. It looks like:</p>
<pre><code>Template:
<h1>{{pluralize type ages.length}}</h1>
Data:
{
pluralize: function(type, count){
return "data-pluralize"
},
todos: new List([22,32,42]),
type: "age"
}
Helpers:
{
pluralize: function(type, count){
return type+(count() === 1 ? "" : "s")
}
}
Result:
<h1>Ages</h1>
</code></pre>
<p>Helper expression arguments that are observable are passed a compute. This is
in contrast to Call expressions that get passed the value.</p>
<p>Helper expression arguments are space seperated. If a Hash expression is an argument,
the hash properties and values will be added to the helper options object. For example:</p>
<pre><code>Template:
<h1>{{pluralize word=type count=ages.length}}</h1>
Data:
{
todos: new List([22,32,42]),
type: "age"
}
Helpers:
{
pluralize: function(helperOptions){
return helperOptions.hash.type+(helperOptions.hash.count() === 1 ? "" : "s")
}
}
Result:
<h1>Ages</h1>
</code></pre>
<h2>Bracket expressions</h2>
<p>A <a href="can-stache/expressions/bracket.html" title="">Bracket Expression</a> can be used to look up a dynamic property in the <a href="can-view-scope.html" title="Create a lookup node for keys.">scope</a>. This looks like:</p>
<pre><code>Template:
<h1>{{[key]}}</h1>
Data:
{
key: "name",
name: "Kevin"
}
Result:
<h1>Kevin</h1>
</code></pre>
<p>This can be useful for looking up values using keys containing non-alphabetic characters:</p>
<pre><code>Template:
<h1>{{["person:name"]}}</h1>
Data:
{
"person:name": "Kevin"
}
Result:
<h1>Kevin</h1>
</code></pre>
<p>Bracket expressions can also be used to look up a value in the result of another expression:</p>
<pre><code>Template:
{{getPerson()[key]}}
Data:
{
key: "name",
getPerson: function() {
return {
name: "Kevin"
};
}
}
Result:
<h1>Kevin</h1>
</code></pre>
</section>
<script type="text/javascript">
var docObject = {"src":{"path":"node_modules/can-stache/docs/expressions/expressions.md"},"description":"\nIn addition to different magic tag types, stache supports different expression\ntypes. These can be used in various combinations to call [can-stache.registerHelper helper methods]\nor [can-component.prototype.ViewModel viewModel methods]. The following is an example of all the expressions\ncombined:\n","name":"can-stache.expressions","title":"Expressions","type":"page","parent":"can-stache.pages","order":2,"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>