Question

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

Answer 1

以下是更新版本：

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

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

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

ractive组件示例不起作用

1 个答案: