Use

The use of (event) bindings changes between listening on DOM events and viewModel events.

DOM events

To listen for a DOM event, wrap the event name with ($event) like:

<div ($click)="doSomething()"/>

By adding ($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 ($click)="items.splice(%index,1)" to remove a 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 ($SPECIAL)='KEY'. This is similar to $.special.

($enter)

($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' ($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, wrap the event name with (event) like:

<player-edit
    (close)="removeEdit()"
    {player}="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",
  template: can.view('player-edit-stache'),
  viewModel: {
    close: function(){
      this.dispatch("close");
    }
  }
});

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