Ractivejs - how to close the slide on tap

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.