GitHub
Twitteron:event
Respond to events on elements or component ViewModels.
on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'
If the element has a ViewModel, listens to an event on the ViewModel and calls the Call Expression when that event occurs.
If the element does not have a ViewModel, listens to an event on the element and calls the Call Expression when that event occurs.
<my-component on:show="doSomething()"/>
Parameters
- VIEW_MODEL_OR_DOM_EVENT
{String}:A viewModel or DOM event.
- CALL_EXPRESSION
{Expressions}:A call expression like
method(key)that is called when theVIEW_MODEL_EVENTis fired. The following scope key values are also supported:scope.element- The element the event happened upon.scope.event- The event object.scope.viewModel- If the element is a can-component, the component’s ViewModel.scope.context- The current context.scope.scope- The current can-view-scope.scope.arguments- The arguments passed when the event was dispatched/triggered.
on:VIEW_MODEL_OR_DOM_EVENT='KEY = VALUE'
Listen to an event and set a property value. The following sets the priority property when
a button is clicked:
<my-demo></my-demo>
<script type='module'>
import {Component} from "can";
Component.extend({
tag: "my-demo",
view: `
<p>Priority: {{this.priority}}</p>
<button on:click="this.priority = 0">Urgent</button>
<button on:click="this.priority = 1">Critical</button>
<button on:click="this.priority = 10">Fahgettaboudit</button>
`,
ViewModel: {
priority: {default: null}
}
});
</script>
Parameters
- VIEW_MODEL_OR_DOM_EVENT
{String}:A viewModel or DOM event.
- key
{String}:A key value to set. This can be any key accessible by the scope. For example:
- Set values on the viewModel -
on:click="this.priority = 0". - Set values on a variable in the scope -
on:click="todo.priority = 0". - Set values on a scope value -
on:click="scope.element.value = 0"
- Set values on the viewModel -
- VALUE
{Expressions}:An expression that evaluates to a value. For example:
- primitives -
on:click="this.priority = 0" - variables -
on:click="this.priority = todo.priority" - functions -
on:click="this.priority = this.getPriority(todo)" - converters -
on:click="this.complete = not(this.complete)"
The following scope values can also be read:
scope.element- The element the event happened upon.scope.event- The event object.scope.viewModel- If the element is a can-component, the component’s ViewModel.scope.context- The current context.scope.scope- The current can-view-scope.scope.arguments- The arguments passed when the event was dispatched/triggered.
- primitives -
- CALL_EXPRESSION
{Expressions}:A call expression like
method(key)that is called when theVIEW_MODEL_EVENTis fired.
on:VIEW_MODEL_OR_DOM_EVENT:KEY:to='SCOPE_VALUE'
If the element has a ViewModel, listens to an event on the ViewModel and binds the element’s value to the SCOPE_VALUE when that event occurs.
If the element does not have a ViewModel, listens to an event on the element and binds the element’s value to the SCOPE_VALUE when that event occurs.
<my-component on:show:value:to="myScopeProp"/>
Parameters
- VIEW_MODEL_OR_DOM_EVENT
{String}:A viewModel or DOM event.
- SCOPE_VALUE
{String}:A value in the current scope.
on:SCOPE_EVENT:by:this='CALL_EXPRESSION'
Listens to an event on the scope and calls the Call Expression when that event occurs.
<my-component on:show:by:this="doSomething()"/>
Parameters
- SCOPE_EVENT
{String}:a scope event.
- CALL_EXPRESSION
{Expressions}:A call expression like
method(key)that is called when theVIEW_MODEL_EVENTis fired. Same as on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'
on:SCOPE_PROP_EVENT:by:SCOPE_PROP='CALL_EXPRESSION'
Listens to an event on a property of the scope and calls the Call Expression when that event occurs.
<my-component on:show:by:obj="doSomething()"/>
Parameters
- SCOPE_PROP_EVENT
{String}:an event triggered by a scope property.
- SCOPE_PROP
{String}:a scope property.
- CALL_EXPRESSION
{Expressions}:A call expression like
method(key)that is called when theVIEW_MODEL_EVENTis fired. Same as on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'
Use
The can-stache-bindings page has many examples of on:event.