Ruby on Rails 5をrailstutorialをやっていれていたので、そこにBootstrap Toggleを導入してみました
gemは
rails 5.0.3
bootstrap-sass 3.3.7
bootstrap-toggle-rails 2.2.1
turbolinks 5.0.1
な感じです
assetにjsとcssをセット
$ vim app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-toggle
//= require turbolinks
//= require_tree .
$ vim app/assets/stylesheets/custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-toggle";
として、bootstrap-toggleを読み込みました
Viewに
<%= check_box_tag "mode", 1, true,
data: { toggle: "toggle", on: "On", off: "Off", onstyle: "primary", offstyle: "danger" },
class: "toggle"
%>
を用意
これだけで、表示されてたりします
初回表示がただのチェックボックスで、リロードすると表示されたり..
Turbolinkの動きのせいらしいので、
GitHub - rkallensee/bootstrap-toggle-rails: Bootstrap Toggle plugin for the Rails asset pipeline
に記載があるように
$(document).on('ready page:change', function() {
$('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});
としたら良さそうでしたが Turbolink 5 からは書き方が違うので
$(document).on('turbolinks:render', function() {
$('input[type="checkbox"].toggle').bootstrapToggle();
});
としてあげると、正しく動きました