• typedef

helper

 

A helper function passed to can.Mustache.registerHelper.

Type Definition: {function(arg, options)}

Parameters

  1. arg {*}Optional

    Arguments passed from the tag. After the helper name, any space seperated keys, numbers or strings are passed as arguments.

    The following template:

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

    Rendered with

    {verb: "swept"}
    

    Will call a madLib helper with the following arguements.

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

    If a can.Mustache.key represents a can.Observe attribute, it is converted to a can.compute getter/setter function. This enables 2-way binding helpers.

    For example, the following helper two-way binds input elemnet's value to a can.compute:

    can.Mustache.registerHelper('value',function(value){
        return function(el){
          value.bind("change",function(ev, newVal){
            el.value = newVal;
          })
          el.onchange = function(){
            value(this.value)
          }
          el.value = value()
        }
    })
    

    And used by the following template:

    <input type="text" {{me.value name}}/>
    

    And rendered with:

    {me: new can.Observe({name: "Payal"})}
    
  2. options {helperOptions}

    An options object that gets populated with optional:

    • fn and inverse section rendering functions
    • a hash object of the maps passed to the helper

Returns

{String | function(HTMLElement)}

The content to be inserted into the template.

This

{Context}

The context the helper was called within.

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 mustache tags that have rich behavior.

If the helper is called within a tag like:

<ul {{sortable}}/>

The returned function is called with the <ul> element:

can.Mustache.registerHelper("sortable",function(){
  return function(el){
    $(el).slider()
  }
})

If the helper is called between tags like:

<ul>{{items}}</ul>

The returned function is called with a temporary element. The following helper would be called with a temporary <LI> element:

can.Mustache.registerHelper("items",function(){
  return function(li){

  }
})

The temporary element depends on the parent element. The default temporary element is a <SPAN> element.