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.

Key and Call Expressions

{{key}} insert data into the template. It most commonly references values within the current context. For example:

Rendering:

<h1>{{name}}</h1>

With:

{name: "Austin"}

Results in:

<h1>Austin</h1>

If the key value is a String or Number, it is inserted into the template. If it is null or undefined, nothing is added to the template.

Nested Properties

Stache supports nested paths, making it possible to look up properties nested deep inside the current context. For example:

Rendering:

<h1>{{book.author}}</h1>

With:

{
  book: {
    author: "Ernest Hemingway"
  }
}

Results in:

<h1>Ernest Hemingway</h1>

Looking up values in parent contexts

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:

Rendering:

{{#chapters}}
   <li>{{title}} - {{name}}</li>
{{chapters}}

With:

{
  title: "The Book of Bitovi"
  chapters: [{name: "Breakdown"}]
}

Results in:

<li>The Book of Bitovi - Breakdown</li>

Helper expressions

The {{helper}} syntax is used to call out to stache helper functions functions that may contain more complex functionality. helper is a key that must match either:

• a registered helper function, or
• a function in the current or parent contexts

The following example shows both cases.

The template:

<p>{{greeting}} {{user}}</p>

Rendered with data:

{
  user: function(){ return "Justin" }
}

And with a registered helper like:

stache.registerHelper('greeting', function() {
  return "Hello";
});

Results in:

<p>Hello Justin</p>

Arguments

Arguments can be passed from the template to helper function by listing space separated strings, numbers or other keys after the helper name. For example:

The template:

<p>{{madLib "Lebron James" verb 4}}</p>

Rendered with:

{verb: "swept"}

Will call a madLib helper with the following arguments:

stache.registerHelper('madLib',
  function(subject, verb, number, options){
    // subject -> "Lebron James"
    // verb -> "swept"
    // number -> 4
});

If an argument key value is a can-map property, the Observe’s property is converted to a getter/setter compute. For example:

The template:

<p>What! My name is: {{mr user.name}}</p>

Rendered with:

{user: new Map({name: "Slim Shady"})}

Needs the helper to check if name is a function or not:

stache.registerHelper('mr',function(name){
  return "Mr. "+ (typeof name === "function" ?
                  name():
                  name)
});

This behavior enables two way binding helpers and is explained in more detail on the helper functions docs.

Hash

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 helper option argument’s hash object. Properties and values are specified as hashProperty=hashValue. For example:

The template:

<p>My {{excuse who=pet how="shredded"}}</p>

And the helper:

stache.registerHelper("excuse",function(options) {
  return ["My",
    options.hash.who || "dog".
    options.hash.how || "ate",
    "my",
    options.hash.what || "homework"].join(" ");
});

Rendered with:

{pet: "cat"}

Results in:

<p>My cat shredded my homework</p>

Returning an element callback function

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 helper function page.