Ractivejs-如何在水龙头上关闭幻灯片

Question

ractive template

<div class="more" on-click="more-detail">
<div class="icon-close" on-tap="close"></div>
</div>

When div is clicked, more detail shows but a bit unsure how to make div.more close by click on icon-close div.

Tried to go thru tutorial pieces for some answer, but couldn't find. I thought by using similar way as JQuery like this:

$('.more').hide(); 

It seems to be working - but when going back to same div and click, it took 2 times to open details again. Is it normal?

Help please.

Answer 1

The easiest way to achieve this is with data binding - rather than modifying the DOM manually (as with $('.more').hide() ), put the extra detail inside a block that is only rendered when some value is truthy, and let Ractive determine when to show and hide it:

<div class="more" on-click="set('showDetail', true)">
  {{#if showDetail}}      
    <div class="icon-close" on-tap="set('showDetail', false)"></div>
  {{/if}}
</div>

That way, you never run into a situation where the DOM and your viewmodel get out of sync - for a given viewmodel state, there is guaranteed to only be one DOM state.

Here's a more complete example (click 'Run code snippet'):

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

 body { font-family: 'Helvetica Neue', arial, sans-serif; font-weight: 200; color: #353535; } button { margin: 0 0 1em 0; } button:last-child { margin: 0; } .detail { background-color: #eee; border: 1px solid #ddd; padding: 1em; } 

 <script src="http://cdn.ractivejs.org/latest/ractive.js"></script> <script src="https://rawgit.com/ractivejs/ractive-transitions-slide/master/ractive-transitions-slide.js"></script> <main></main> <script id='template' type='text/ractive'> <div class='expandable'> <button on-click='toggle("showDetail")'>toggle detail</button> {{#if showDetail}} <div class='detail' intro-outro='slide'> <p>Here is some more detail!</p> <button on-click='set("showDetail",false)'>hide detail</button> </div> {{/if}} </div> </script> 

The other advantage of this approach is that it keeps your DOM tidy - rather than having invisible elements in the page, Ractive only renders what you actually need.