DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
        • Pages
          • Magic Tag Types
          • Scope and Context
          • Expressions
          • Template Acquisition
          • Helpers
          • Live Binding
          • Whitespace Control
          • Sections
        • Methods
          • addHelper
          • addLiveHelper
          • from
          • registerConverter
          • registerHelper
          • registerPartial
          • registerSimpleHelper
          • safeString
        • Tags
          • {{expression}}
          • {{{expression}}}
          • {{#expression}}
          • {{/expression}}
          • {{^expression}}
          • {{>key}}
          • {{!expression}}
          • {{<partialName}}
          • {{else}}
        • Expressions
          • Bracket Expression
          • Call Expression
          • Hash Expression
          • Helper Expression
          • KeyLookup Expression
          • Literal Expression
        • Key Operators
          • @at
          • ~compute
          • ./current
          • ../parent
          • scope
          • %special
          • this
          • *variable
          • *self
          • key
        • Helpers
          • {{#if(expression)}}
          • {{#unless(expression)}}
          • {{#each(expression)}}
          • {{#with(expression)}}
          • {{log()}}
          • {{debugger()}}
          • {{#eq(expressions)}}
          • {{#is(expressions)}}
          • {{#switch(expression)}}
          • {{#case(expression)}}
          • {{#default()}}
          • {{joinBase(expressions)}}
        • Types
          • getterSetter
          • helper
          • helperOptions
          • renderer
          • sectionRenderer
          • simpleHelper
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-namespace
      • can-reflect
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

{{#expression}}

  • Edit on GitHub

Renders a subsection one or more times depending on the type of expression or the expression’s return value.

{{#KEY_EXPRESSION}}FN{{else}}INVERSE{{/KEY_EXPRESSION}}

Renders the FN or INVERSE section one or many times depending on the value in KEY_EXPRESSION.

If KEY_EXPRESSION returns an array like object, the FN section will be rendered for each item in the array. If the array like object is empty, the INVERSE section will be rendered. The {{#each(expression)}} helper should generally be used for observable array-like objects as it has some performance advantages.

{{#items}}<li>{{name}}</li>{{/items}}

If KEY_EXPRESSION returns a truthy value, the FN section will be rendered with the truthy value.

If KEY_EXPRESSION returns a fasley value, the INVERSE section will be rendered with the fasley value.

{{#address}} {{street}} {{city}} {{/address}}

The closing tag can end with {{/}}.

Parameters

  1. KEY_EXPRESSION {KeyLookup Expression}:

    A key expression. If there is no value in the scope of keyOrHelper, it will be treated as a Helper Expression.

  2. FN {sectionRenderer(context, helpers)}:

    The truthy subsection.

  3. INVERSE {sectionRenderer(context, helpers)}:

    An optional inverse section created by using {{else}}.

{{#CALL_EXPRESSION}}FN{{else}}INVERSE{{/CALL_EXPRESSION}}

Works like {{#KEY_EXPRESSION}}, but uses the return value of the CALL_EXPRESSION.

{{#getTasksForPerson(person)}}<li>{{name}}</li>{{/getTasksForPerson}}

Typically, the closing tag only include the method name and not its parameters.

The closing tag can end with {{/}}.

Parameters

  1. CALL_EXPRESSION {Call Expression}:

    A function that will be called with any specified arguments.

  2. FN {sectionRenderer(context, helpers)}:

    The truthy subsection.

  3. INVERSE {sectionRenderer(context, helpers)}:

    An optional inverse section created by using {{else}}.

{{#HELPER_EXPRESSION}}FN{{else}}INVERSE{{/HELPER_EXPRESSION}}

Calls a registered helper or a function in the can-view-scope with an additional helperOptions argument that can call the FN or INVERSE helpers to build the content that should replace these tags.

<p>{{#countTo(number)}}{{num}}{{/countTo}}</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.

Parameters

  1. HELPER_EXPRESSION {Helper Expression}:

    Calls a helper method or function in the can-view-scope with specified arguments.

  2. FN {sectionRenderer(context, helpers)}:

    The truthy subsection.

  3. INVERSE {sectionRenderer(context, helpers)}:

    An optional inverse section created by using {{else}}.

Use

The following breaks down the behavior of {{#expression}}. It groups the behavior of KeyLookup Expression and Call Expressions because their behavior works the same way. It then details how Helper Expressions work.

KeyLookup and Call expressions

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.

Falseys or Empty Arrays

If the value returns a false, undefined, null, "" or [] we consider that a falsey value.

If the value is falsey, the section will NOT render the block.

/* Data */
{
  friends: false
}
<!-- Result -->
{{#friends}}
  Never shown!
{{/friends}}

Arrays

If the value is a non-empty array, sections will iterate over the array of items, rendering the items in the block.

For example, a list of friends will iterate over each of those items within a section.

<!-- Template -->
<ul>
    {{#friends}}
        <li>{{name}}</li>
    {{/friends}}
</ul>
/* Data */
{
    friends: [
        { name: "Austin" },
        { name: "Justin" }
    ]
}
<!-- Result -->
<ul>
    <li>Austin</li>
    <li>Justin</li>
</ul>

Reminder: Sections will reset the current context to the value for which it is iterating. See the basics of contexts for more information.

Truthys

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.

<!-- Template -->
{{#friends}}
    Hi {{name}}
{{/friends}}
/* Data */
{
    friends: { name: "Jon" }
}
<!-- Result -->
Hi Jon!

Helper expression

A helper like:

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});
    }
});

Could be called like:

<p>
  {{#countTo number}}
    {{num}}
  {{else}}
    Can’t count to {{num}}!
  {{/countTo}}
</p>

Called with data like:

{number: 3}

Produces:

<p> 1 2 3 </p>

Called with data like:

{number: -5}

Produces:

<p> Can’t count to -5! </p>

Notice how options has .fn and .inverse.

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 3.14.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news