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

Ractivejs - how to close the slide on tap

本文关键字：幻灯片 Ractivejs      更新时间：2023-09-26

ractive template

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

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

试图通过教程片段寻找一些答案，但找不到。我想使用与JQuery类似的方式，如下所示：

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

它似乎正在工作 - 但是当返回相同的div 并单击时，再次打开详细信息需要 2 次。正常吗？

请帮忙。

实现此目的的最简单方法是使用数据绑定 - 而不是手动修改 DOM（如 $('.more').hide() ），将额外的细节放在一个块中，该块仅在某个值为真实时呈现，并让 Ractive 确定何时显示和隐藏它：

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

这样，您就不会遇到 DOM 和视图模型不同步的情况 - 对于给定的视图模型状态，保证只有一个 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 只呈现你实际需要的东西。

相关文章：