Ractive.js Tutorial 4-4

index.html

<!-- http://learn.ractivejs.org/conditional-sections/4 -->
 
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
<script src='https://raw.github.com/ractivejs/ractive-events-tap/master/ractive-events-tap.js'></script>


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

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

Ractive.js-Tutorial-4-4.markdown

Ractive.js Tutorial 4-4

A Pen by Ken on CodePen.

License.

script.js

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

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