ractivejs - RactiveJS, Stuck at Tutorial 4. Event proxies

Question

I am following the Tutorials but I am stuck at 4. Event Proxies:

The following doesnt work for me, it just happens nothing:

<button on-click='activate'>Activate!</button>
...
ractive.on( 'activate', function ( event ) {
      alert( 'Activating!' );
});

Here is a live example: http://jsbin.com/kupetofawavu/1/

What am I missing, please?

Answer 1

Put your buttons inside the template and you're good.
Cheers!

Answer 2

Your buttons are outside of the template... move them into the template script tag, and it should work.

Answer 3

The buttons need to be in the template. Change

<script id='template' type='text/ractive'>
    <p>Hello, [[name]]!</p>
    <p>[[counter]]</p>   
    <p>[[format(date)]]</p>
</script>
<button id="doit">Count</button>
<button on-click='activate'>Activate!</button>

to

<script id='template' type='text/ractive'>
    <p>Hello, [[name]]!</p>
    <p>[[counter]]</p>   
    <p>[[format(date)]]</p>
    <button id="doit">Count</button>
    <button on-click='activate'>Activate!</button>
</script>