Rails Turbolinks-缓存前删除样式

我认为问题在于 return s、 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);

外部功能将 回来 早起和你的 turbolinks:before-cache 代码永远不会运行。CoffeeScript自动返回最后一行。如果你想回来 undefined ,确保您的 回来

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

@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">

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

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