%special
Event bindings and some helpers like {{#each(expression)}} provide special values that start with %
to prevent potential collisions with
other values. Special values should not be confused with template variables
like *self.
Deprecated 3.12
The %special
values have been deprecated in favor of scope.
%index
When looping over an array, can-define/list/list, or can-list, you an use %index
to write out the index of each property:
{{#each(tasks)}}
<li>{{%index}} {{name}}</li>
{{/each}}
Indexes start at 0. If you want to start at 1, you can create a helper like:
stache.registerHelper('%indexNum', function(options) {
return options.scope.get("%index") + 1;
});
And use it like:
{{#each(task)}}
<li>{{%indexNum}} {{name}}</li>
{{/each}}
%key
Like %index
, but provides the key value when looping through an object:
{{#each(style)}}
{{%key}}: {{this}}
{{/each}}
%element
In an event binding, %element
references the DOM element the event happened on:
<input ($click)="doSomething(%element.value)"/>
%event
In an event binding, %event
references the dispatched event object:
<input ($click)="doSomething(%event)"/>
%viewModel
In an event binding, %viewModel
references the view model of the current element:
<my-component (closed)="doSomething(%viewModel)"/>
%arguments
In an event binding, %arguments
references the arguments passed when the event was dispatched/triggered.
<input ($click)="doSomething(%arguments)"/>