活性组件示例不起作用答案

【问题标题】：ractive components example not working活性组件示例不起作用
【发布时间】：2015-03-12 00:14:05
【问题描述】：

我是 ractive.js 的新手，不是最擅长 javascript 的。我一直在研究 ractive webite 上的示例，但我无法让这个特定示例正常工作。我想这一定是我忽略了一些简单的事情。

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

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

这是我的 html 代码。脚本代码请参见小提琴。

 <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>

【问题讨论】：

标签： components

【解决方案1】：

这是更新版本：

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

它在第一行失败，其中变量template 未定义。显然，演示预先填充了该变量。它还使用了旧版本的 ractive js，您必须在其中调用 Ractive.parse(...)。

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

【讨论】：