Ractive.js Tutorial 4-3

index.html

<!-- http://learn.ractivejs.org/event-proxies/3/ -->
 
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

<div id='container'></div>


<script id='template' type='text/ractive'>
  <button on-click='activate'>Activate!</button>
  <button on-click='deactivate'>Deactivate!</button>
  <button on-click='silence'>Silence!</button>
</script>

Ractive.js-Tutorial-4-3.markdown

Ractive.js Tutorial 4-3

A Pen by Ken on CodePen.

License.

script.js

var ractive = new Ractive({
  el: 'container',
  template: '#template'
});

listener = ractive.on({
  activate: function(e){
    alert('Activating!');
  },
  deactivate: function(e){
    alert('Deactivate!');
  },
  silence: function(e){
    alert('No more alerts!');
    listener.cancel();
  }
});