Use

DOM events

on:el: will listen for events on the DOM, on: can also be used to listen for DOM events if the element does not have a ViewModel.

<div on:click="doSomething()"/>

By adding on:EVENT='methodKey()' to an element, the function pointed to by methodKey is bound to the element’s EVENT event. The function can be passed any number of arguments from the surrounding scope, or name=value attributes for named arguments. Direct arguments will be provided to the handler in the order they were given.

The following uses on:click='../items.splice(scope.index,1)' to remove an item from items when that item is clicked on.

Special Event Types

can-stache-bindings supports creating special event types (events that aren’t natively triggered by the DOM), which are bound by adding attributes like on:SPECIAL='KEY'. This is similar to $.special.

on:enter

on:enter is a special event that calls its handler whenever the enter key is pressed while focused on the current element. For example:

<input type='text' on:enter='save()' />

The above template snippet would call the save method (in the scope) whenever the user hits the enter key on this input.

viewModel events

To listen on a Component’s ViewModel, prepend the event with on: (on:vm: can also be used to be make this more explicit) like:

<player-edit
    on:close="removeEdit()"
    player:from="editingPlayer"/>

ViewModels can publish events on themselves. The following <player-edit> component dispatches a "close" event on itself when its close method is called:

Component.extend({
    tag: "player-edit",
    view: stache($('#player-edit-stache').html()),
    ViewModel: DefineMap.extend({
        player: Player,
        close: function(){
            this.dispatch("close");
        }
    })
});

The following demo uses this ability to create a close button that hides the player editor:

Changing a property when an event occurs

An event on either the element or viewModel can be set to bind the element’s value to a property on the scope like:

<input type="text" value="" on:blur:value:to="myScopeProp">

This will set the value of myScopeProp to the input’s value anytime the input loses focus.