更改布局后删除了 application.js 函数答案

【问题标题】：application.js function removed after changing layout更改布局后删除了 application.js 函数
【发布时间】：2020-10-02 13:25:03
【问题描述】：

我正在使用 Rails 6.0.3.1 创建一个应用程序，当以这种方式调用新方法时，布局会发生变化：

def index
  @groups = Group.all
  render layout: 'application'
end

def new
  @group = current_user.groups.build
  render layout: 'without_sidebar'
end

我的 /app/javascript/packs/application.js 里面有这个功能：

$(document).ready(function () {
  $('#sidebarCollapse').on('click', function () {
    $('#sidebar').toggleClass('active');
  });
});

检查代码后，我注意到“sidebarCollapse”元素的事件侦听器在渲染“without_sidebar”布局后被删除，即使我再次回调索引控制器方法，它也不再出现。这是为什么？我应该如何呈现我的索引页面的默认布局和新页面的“without_sidebar”布局？

要再次返回到索引页面，我在 without_sidebar 布局的标题内使用了这个元素：

<a href="<%= yield(:forwarding_url) %>" class="btn text-white" type="button">

在哪里forwarding_url = groups_path

【问题讨论】：

标签： javascript ruby-on-rails ruby layout render

【解决方案1】：

这是我要检查的第一件事：

首先，application.js 包是否包含在 without_sidebar 布局中？如果没有，请添加它。

其次，在 jQuery 附加事件侦听器后，turbolinks（或其他一些 js 渲染）是否导致 #sidebarCollapse 渲染？如果是这样，请更改您的事件处理程序。

对于 turbolinks，而不是 $(document).ready(...)，尝试：

$(document).on('turbolinks:load', function() {
  ...
})

您还可以以更有弹性的方式编写 jQuery 事件侦听器：

$(document).on('#sidebarCollapse', 'click', function(event) {
...
})

最后，turbolinks 使得具有不同布局的页面之间的链接变得相当棘手。您可能只需要禁用链接中的 turbolink：

<%= link_to 'page', page_path, data: { turbolinks: false } %>
or
<a href="<%= yield(:forwarding_url) %>" class="btn text-white" type="button" data-turbolinks="false">

【讨论】：