Question

ractive模板

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

当点击div时，更多详细信息显示但有点不确定如何通过点击icon-close div来使div.more关闭。

试图通过教程片段获得一些答案，但无法找到。我想通过像JQuery一样使用类似的方式：

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

它似乎正在工作 - 但当回到同一个div并点击时，花了2次再次打开细节。这是正常的吗？

请帮助。

Answer 1

实现这一目标的最简单方法是使用数据绑定 - 而不是手动修改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和 viewmodel 不同步的情况 - 对于给定的viewmodel状态，保证只有一个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只会呈现你真正需要的东西。

Ractivejs - 如何关闭幻灯片

1 个答案: