ractive components example not working - components

Question

I'm new to ractive.js and not the best with javascript. I've been working through the examples on the ractive webite and I cannot get this particular example to work. I'm thinking it must be something simple I'm overlooking.
Here is a link to the working example on ractive's website:
http://examples.ractivejs.org/components
Here is my fiddle: http://jsfiddle.net/lotuscg/dtzuhe60/10/
Here is my html code. Please see fiddle for script code.
<h1>Chris's Components Example</h1>
<div id='output'></div>
<script id='mainTemplate' type='text/ractive'>
{{#months:i}}
<div class='box'>
<!-- the donut chart -->
<donutchart data='{{data}}' selected='{{id}}' delay='{{ i * 50 }}'
on-select='select'/>
<!-- the month name -->
<div class='label'>{{name}}</div>
</div>
{{/months}}
<!-- {{>donutchart}} -->
<svg viewBox='0 0 100 100'>
<g transform='translate(50,50)'>
{{# getSegments( data ) :i}}
<polygon on-hover='select:{{id}}' class='donut-segment' fill='{{ colors[ id ] }}'
opacity='{{ !selected ? 1 : ( selected === id ? 1 : 0.2 ) }}'
points='{{ getSegmentPoints( ., 20, 50, c ) }}'
>
{{/ segments }}
</g>
</svg>
<!-- {{/donutchart}} -->
</script>

Answer 1

Here is the updated version:
http://jsfiddle.net/dtzuhe60/16/
It failed at the very first line, where the variable template was undefined. Apparently, the demo filled that variable beforehand. It also used a legacy version of ractive js where you had to call Ractive.parse(...).
In the updated version, I simply gave the templateIds as argument directly in the constructor:
DonutChart = Ractive.extend({
template: "#donutchart",
...
ractive = new Ractive({
el: '#output',
template: '#mainTemplate',
...