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 ObservableObject( {
    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", ( 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

scope.root is deprecated. Use either scope.top or scope.vm instead.

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 ObservableObject( {
    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 ObservableObject( {
    exclamation: "*&!#?!"
} );

const vm = new ObservableObject( {
    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 ObservableObject( {
    tasks: [ "one", "two" ],
    exclamation: "!!!"
} );

const scope = new Scope(vm, null, { viewModel: true });

const frag = view( scope );

// renders:
// <li>one!!!</li>
// <li>two!!!</li>