javascript - Ractivejs - 如何点击时关闭幻灯片

Question

事件模板

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

单击 div 时，会显示更多详细信息，但有点不确定如何通过单击图标关闭 div 来关闭 div.more。

尝试通过教程来寻找答案，但找不到。我想通过使用与 JQuery 类似的方式，如下所示:

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

它似乎有效 - 但是当返回到同一个 div 并单击时，需要两次才能再次打开详细信息。正常吗？

请帮忙。

Answer 1

实现此目的的最简单方法是使用数据绑定(bind) - 而不是手动修改 DOM(如 $('.more').hide())，而是将额外的详细信息放入 block 中仅当某个值为真时才会呈现，并让 Ractive 确定何时显示和隐藏它:

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

这样，您就不会遇到 DOM 和 View 模型不同步的情况 - 对于给定的 View 模型状态，保证只有一个 DOM 状态。

这是一个更完整的示例(单击“运行代码片段”):

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>

这种方法的另一个优点是它可以保持 DOM 整洁 - Ractive 只渲染您实际需要的内容，而不是在页面中包含不可见的元素。