scope
The template context
scope.arguments
In an event binding, scope.arguments
references the arguments passed when the event was dispatched/triggered.
<input on:click="doSomething(scope.arguments)"/>
scope.element
In an event binding, scope.element
references the DOM element the event happened on:
<input on:click="doSomething(scope.element.value)"/>
scope.event
In an event binding, scope.event
references the dispatched event object:
<input on:click="doSomething(scope.event)/>"
scope.filename
The filename of the current template (only available in dev mode).
{{scope.filename}}
scope.find
Use find to look up the value of a key in the first scope where it is found.
const view = stache( `
{{#each(tasks)}}
<li>{{this}}{{scope.find("exclamation")}}</li>
{{/each}}
` );
const data = new DefineMap( {
tasks: [ "one", "two" ],
exclamation: "!!!"
} );
const frag = view( data );
// renders:
// <li>one!!!</li>
// <li>two!!!</li>
scope.index
When looping over an array, can-define/list/list, or can-list, you an use scope.index
to write out the index of each property:
{{#each(tasks)}}
<li>{{scope.index}} {{name}}</li>
{{/each}}
Indexes start at 0. If you want to start at 1, you can create a helper like:
stache.registerHelper( "scope.indexNum", function( options ) {
return options.scope.get( "scope.index" ) + 1;
} );
And use it like:
{{#each(task)}}
<li>{{scope.indexNum}} {{name}}</li>
{{/each}}
scope.key
Like scope.index
, but provides the key value when looping through an object:
{{#each(style)}}
{{scope.key}}: {{this}}
{{/each}}
scope.lineNumber
The current line number that is being rendered (only available in dev mode).
{scope.lineNumber}}
scope.root
The root scope. This can be used for reading data from the root when in another scope:
const view = stache( `
{{#each(tasks)}}
<li>{{this}}{{scope.root.exclamation}}</li>
{{/each}}
` );
const data = new DefineMap( {
tasks: [ "one", "two" ],
exclamation: "!!!"
} );
const frag = view( data );
// renders:
// <li>one!!!</li>
// <li>two!!!</li>
scope.top
The "top" context that is a viewModel.
const view = stache( `
{{#each(tasks)}}
<li>{{this}}{{scope.top.exclamation}}</li>
{{/each}}
` );
const parentVm = new DefineMap( {
exclamation: "*&!#?!"
} );
const vm = new DefineMap( {
tasks: [ "one", "two" ],
exclamation: "!!!"
} );
var scope = new Scope(parentVm, null, { viewModel: true })
.add(vm, { viewModel: true });
const frag = view( scope );
scope.vars
Variables local to the template. See scope.vars for details.
scope.view
The current template. See scope.view for details.
scope.viewModel
In an event binding, scope.viewModel
references the view model of the current element:
<my-component on:closed="doSomething(scope.viewModel)"/>
scope.vm
The first context that is a viewModel.
const view = stache( `
{{#each(tasks)}}
<li>{{this}}{{scope.vm.exclamation}}</li>
{{/each}}
` );
const vm = new DefineMap( {
tasks: [ "one", "two" ],
exclamation: "!!!"
} );
const scope = new Scope(vm, null, { viewModel: true });
const frag = view( scope );
// renders:
// <li>one!!!</li>
// <li>two!!!</li>