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并单击时，花了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和视图模型不同步的情况-对于给定的视图模型状态，保证只有一个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不会呈现页面中的不可见元素，而是仅呈现您实际需要的内容。