Rails Turbolinks - 在缓存之前删除样式

Question

我有这个 div：

<div class="hidden" id="more-items">

如果点击事件发生，我会取消隐藏/隐藏：

<button type="button" onclick="showHide()">

通过：

@showHide = () ->
  $('div#more-items').toggleClass('hidden')
return

但问题是 div 应该在用户返回页面后关闭。如果他让它保持打开状态，它会在内容加载后保持打开状态 1 或 2 秒。不知道它在什么阶段关闭。

这没有帮助：

document.addEventListener 'turbolinks:before-cache', (e) ->
  $('div#more-items')[0].style.display = 'none'
return

还有这个：

document.addEventListener 'turbolinks:before-render', (e) ->
  e.data.newBody.getElementById('more-items').style.display = 'none'
return

Answer 1

我认为问题在于returns 的缩进。 Rails 资产管道将每个咖啡脚本文件包装在一个立即调用的函数表达式 (IIFE) 中，因此您编译的 JavaScript 如下所示：

(function() {
  this.showHide = function() {
    return $('div#more-items').toggleClass('hidden');
  };

  return;

  document.addEventListener('turbolinks:before-cache', function(e) {
    return $('div#more-items')[0].style.display = 'none';
  });

  return;

}).call(this);

外部函数将提前return 并且您的turbolinks:before-cache 代码将永远不会运行。 CoffeeScript 自动返回最后一行。如果您想返回 undefined，请确保您的 return 与函数代码的缩进级别相同。

将您的咖啡脚本更改为以下内容应该可以解决此问题：

@showHide = () ->
  $('div#more-items').toggleClass('hidden')

document.addEventListener 'turbolinks:before-cache', (e) ->
  $('div#more-items')[0].style.display = 'none'

---

为了稍微整理一下，您还可以执行以下操作：

HTML：

<button type="button" id="toggle-more">

CoffeeScript：

$(document).on 'click', '#toggle-more', ->
  $('#more-items').toggleClass('hidden')

$(document).on 'turbolinks:before-cache', ->
  $('#more-items').addClass('hidden')