在我的 Rails 5 应用程序中,我应该如何在 `application.js` 中要求 turbolinks

How should I require turbolinks in `application.js` in my Rails 5 application

我正在构建一个相对较新的 Rails 5 应用程序。我一直在使用 bootsy gem 并且我遇到了一个问题,即所见即所得在页面刷新后才会显示在页面上。玩了一会儿后,我发现如果我从我的 application.js 中删除 turbolinks,所见即所得第一次出现(没有页面刷新)。任何人都可以告诉我如何将 turbolinks 要求到我的 application.js 中。提前致谢。

application.js:

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require bootsy
//= require turbolinks
//= require_tree .

application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootsy";
@import "articles";

gem文件:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.0.0'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.15'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'

gem 'jquery-turbolinks'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

gem 'simple_form'

gem 'bootstrap-sass'

gem 'bootsy'

我将 simple_formbootsy 结合使用,所以我的表单如下所示:

<%= simple_form_for @article, url: action_path do |f| %>
  <%= f.input :title %>
  <%= f.input :body, label: "Article Body", as: :bootsy %>
  <%= f.submit %>
 <% end %>

您需要像这样使用 turbolinks:load 事件:

$(document).on('turbolinks:load', ready)

function ready() {
  //your code here
}

你的要求没问题。

就是这样。

经过一番尝试,我找到了解决方案。我将 document.addEventListener('turbolinks:load', Bootsy.init); 添加到我的 application.js 中,这解决了问题。