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

抽象模板

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

它似乎在工作——但当返回到同一个div并单击时，需要2次才能再次打开详细信息。这正常吗

---

请提供帮助。

实现这一点的最简单方法是使用数据绑定，而不是手动修改DOM（如使用

$（'.more'）.hide（）

），将额外的细节放在仅在某个值真实时渲染的块中，并让Ractive确定何时显示和隐藏它：

{{#如果显示详细信息}
{{/if}

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

下面是一个更完整的示例（单击“运行代码段”）：

var-ractive=新的ractive({
el:'主要'，
模板：“#模板”
});
正文{字体系列：'Helvetica Neue'，arial，无衬线；字体重量：200；颜色：353535；}按钮{边距：0 0 1em 0；}按钮：最后一个子{边距：0；}。细节{背景色：#eee；边框：1px实心#ddd；填充：1em；}

切换细节
{{#如果显示详细信息}
这里有更多的细节

隐藏细节
{{/if}

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