0

我是新的 Ractive.js 用户。

我想做两个按钮，点击它们，出现“警报”消息。我在这里做 了我的页面的正文

<body>



<div class="center" id='container'></div>

 <script id='template' type='text/ractive'>
  <h1><p class="center"> {{logo}} </p></h1>
  <p class="center">{{name}}</p>
  </script>
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>  

</div>

<div class="center" id="footer">
 <p class="center" ><font color ="ffffff">Footer</font></p>
</div>

<div class="button1">

        <button on-click='activate'>Settings</button>

</div>


<div class="button1">

        <button on-click='deactivate'>Reports</button>

</div>

<script>
    var ractive = new Ractive({

      el: 'container',


      template: '#template',


      data: { 
        name: 'spatium',
        logo: '\\|/' }
    });
</script>

<script>

    ractive.on({
  activate: function () {
    alert( 'Activating!' );
  },
  deactivate: function () {
    alert( 'Deactivating!' );
  }
});

</script>



</body>

什么也没发生。问题可能是两个脚本之间的冲突吗？

4

1 回答 1

0

按钮必须在您的模板内：

<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>  

<div class="center" id='container'></div>

<script id='template' type='text/ractive'>
    <h1><p class="center"> {{logo}} </p></h1>
    <p class="center">{{name}}</p>

    <div class="center" id="footer">
        <p class="center" ><font color ="ffffff">Footer</font></p>
    </div>

    <div class="button1">
        <button on-click='activate'>Settings</button>
    </div>

    <div class="button1">
        <button on-click='deactivate'>Reports</button>
    </div>
</script>

<script>
    var ractive = new Ractive({
        el: 'container',
        template: '#template',
        data: { 
            name: 'spatium',
            logo: '\\|/' }
    });

    ractive.on({
        activate: function () {
            alert( 'Activating!' );
        },
        deactivate: function () {
            alert( 'Deactivating!' );
        }
    });
</script>
于 2014-08-05T16:59:01.723 回答