Question

我是新的Ractive.js用户。

我想制作两个按钮，按下它们，出现“allert”消息。我做了here 这是我页面的正文

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

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

Answer 1

按钮必须位于模板内：

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

事件代理。 Ractive.js

1 个答案: