ractive components示例不工作

Question

我是ractive.js的新手，对javascript也不是很在行。我一直在研究ractive网站上的示例，但我无法让这个特定的示例正常工作。我在想，一定是我忽略了一些简单的东西。

以下是ractive网站上的工作示例的链接：http://examples.ractivejs.org/components

这是我的小提琴：http://jsfiddle.net/lotuscg/dtzuhe60/10/

这是我的html代码。脚本代码请参见fiddle。

 <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

以下是更新后的版本：

http://jsfiddle.net/dtzuhe60/16/

它在第一行失败，变量template是未定义的。显然，demo事先填充了这个变量。它还使用了一个遗留版本的ractive js，在这个版本中你必须调用Ractive.parse(...)。

在更新版本中，我只是在构造函数中直接给出了templateIds作为参数：DonutChart = Ractive.extend({ template: "#donutchart", ... ractive = new Ractive({ el: '#output', template: '#mainTemplate', ...