GitHub
Twitterhelper
A helper function passed to addLiveHelper. 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.
function(arg..., options)
Parameters
- arg
{*|can-compute}:Arguments passed from the tag. After the helper name, any space separated keys, numbers or strings are passed as arguments. Keys that read an observable value in helpers are passed as computes .
- options
{helperOptions}:An options object that is an additional argument in
Helperexpressions that is populated with optional:fnandinversesection rendering functions- a
hashobject of the maps passed to the helper
Returns
{documentFragment|String|Array|function(Node)}:
The content to be inserted into the template or a callback function. The content can be a:
documentFragmentlike those returned by helperOptions.fn.Stringlike"Hello World"Arrayof strings and nodes like["Hello", document.createElement('div')]
If a function(Node) is returned, it will be called back with an HTML Element or text node.
If the helper is called on an element like:
<div {{myHelper}}>
…the callback function will be called with the div.
If the helper is called outside of an element’s tag like:
<div> {{myHelper}} </div>
…the callback function will be called with a placeholder text node.
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.
If the helper is called within a tag like:
<ul {{sortable}}/>
The returned function is called with the <ul> element:
stache.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 text node:
stache.registerHelper( "items", function() {
return function( textNode ) {
// do something, probably replace textNode
};
} );
While this form of helper is still supported, it’s more common to create similar functionality with can-component or can-view-callbacks.