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

Question

我有这个div:

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

我 unhide/hide 如果点击事件发生：

<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

我认为问题在于 return 的缩进。 Rails 资产管道将每个 coffeescript 文件包装在一个立即调用的函数表达式 (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 自动 return 作为最后一行。如果您想 return undefined，请确保您的 return 缩进与函数代码相同。

将您的 coffeescript 更改为以下内容应该可以解决此问题：

@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')

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

Rails Turbolinks - remove style before caching

ajax

ruby-on-rails-5

turbolinks