没有在功能上做任何事情来关闭面板

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'); 
     } 
    }) 
    } 
    }); 

当试图点击'x'按钮时，它不会在console.log中显示“close”。 不知道为什么它没有做任何事情。

当点击关闭时，还在谷歌上查找了动画（淡出）的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。