Question

<div class="close" on-click='close'></div>


Ractive.components['block:close'] = Ractive.extend({
  isolated: true,
  onrender: function() {

    this.on({
      close : function(event) {
        console.log('close');
      }
    })
  }
  });

尝试点击＆＃39; x＆＃39;按钮，它没有显示＆＃34;关闭＆＃34;在console.log中。不知道为什么它没有做任何事情。

当点击关闭时，还在google上查找ractivejs动画（淡出）。在没有使用JQuery的情况下找不到方法

Answer 1

不太确定你的例子中发生了什么 - 这很好用！

Ractive.components['block:close'] = Ractive.extend({
  isolated: true,
  template: '<div class="close" on-click="close">click me</div>',
  onrender: function() {
    this.on({
      close: function(event) {
        alert('it works');
      }
    });
  }
});

var ractive = new Ractive({
  el: 'main',
  template: '<block:close/>'
});

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

要添加淡入淡出和其他过渡，您需要使用transition plugins。例如：

new Ractive({
  el: 'main',
  template: '#template'
});

<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script src='https://rawgit.com/ractivejs/ractive-transitions-fade/master/dist/ractive-transitions-fade.js'></script>

<main></main>

<script id='template' type='text/html'>
  <label>
    <input type='checkbox' checked='{{visible}}'>
    visible (click me)
  </label>
  
  {{#if visible}}
    <div intro='fade'>this will fade in</div>
  {{/if}}
</script>

有关详细信息，请参阅the ractive-transitions-fade GitHub repo。

没有做任何功能来关闭面板

1 个答案: