带有 Turbolinks 的 Rails Bootstrap 4

Posted

技术标签:

【中文标题】带有 Turbolinks 的 Rails Bootstrap 4【英文标题】:Rails Bootstrap 4 with Turbolinks 【发布时间】:2020-02-10 09:02:27 【问题描述】:

我有一个安装了bootstrap-rubygem (v4.3) 的功能齐全的rails 应用程序。

在我的应用程序中,当单击remote: true 链接时,我有一个部分会重新呈现。单击此链接时,我有一个响应 JS 的控制器,然后在我的 .js.erb 视图中,我替换了特定 div 的 html

现在在这个局部视图中,我使用了工具提示和下拉菜单。问题是,工具提示仅在硬刷新后才有效。一旦我单击远程重新加载部分,工具提示就会停止工作。下拉菜单的情况正好相反。在我单击远程链接之前,它们无法工作。

我在设置这个 gem 时是否遗漏了什么,或者我在使用 JQuery 和 Turbolinks 实现引导程序的方式上是否犯了错误?

主 JS 文件:application.js

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
$(document).on('ready turbolinks:load', function () 
  $('[data-toggle="tooltip"]').tooltip();
);

主布局文件:application.haml

!!!
%html
  %head
    %meta:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"/
    %title Dummy App
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    #sample-wrapper= render "sample/index"
    = yield

用于在 div 中呈现内容的 JS 视图:sample/index.js.erb

$("#sample-wrapper").html("<%= j (render 'sample/index' ) %>");

带有工具提示和下拉菜单的 HAML 视图示例/index.haml

.card
  %h1data: toggle: "tooltip", placement: "bottom", title: @sample.title= @sample.title
  .dropdown.card-options
    %button#dropdownMenu1.btn.btn-ghost.dropdown-toggle.no-caret"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"
      = fa_icon "ellipsis-h"
    .dropdown-menu.dropdown-menu-right"aria-labelledby" => "dropdownMenu1"
      = link_to "Edit", edit_sample_path(@sample.token), class: "dropdown-item", remote: true

【问题讨论】:

【参考方案1】:

你必须重新初始化工具提示

$('[data-toggle="tooltip"]').tooltip()

rerender partial 后,你可以在你的 js.erb 文件中渲染后添加

要使用下拉菜单解决问题,您必须在 turbolinks 上初始化它们:像工具提示一样加载

【讨论】:

以上是关于带有 Turbolinks 的 Rails Bootstrap 4的主要内容,如果未能解决你的问题,请参考以下文章

带有 mmenu/sidr 和 Jquery 和 Turbolinks 问题的 Rails

在 Rails 4 中使用 Foundation 和 Turbolinks 时遇到问题

Rails 4 + Turbolinks + JQuery Turbolinks + Coffeescript:事件被多次触发

rails ckeditor不使用turbolinks

Rails、Turbolinks 和微调器

rails 4 turbolinks 多个绑定