实现引导切换开关答案

【问题标题】：Implementing Bootstrap Toggle Switch实现引导切换开关
【发布时间】：2015-09-10 19:28:24
【问题描述】：

我正在尝试从http://www.bootstraptoggle.com/ 实现切换开关。

gem 'rails-bootstrap-toggle-buttons'

捆绑

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-toggle-buttons
//= require turbolinks
//= require_tree .

和

 *= require bootstrap-toggle-buttons
 *= require_tree .
 *= require_self
 */

查看：

<%= f.check_box :email_notifications, :'data-toggle'=>"toggle" %>

只是给了我一个简单的复选框。关于为什么这不起作用的任何线索？

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

首先：您想拥有来自http://www.bootstraptoggle.com/ 的拨动开关，但从我看到的rails-bootstrap-toggle-buttons gem 似乎包含来自http://www.bootstrap-switch.org/ 的拨动开关。这可能是您的问题，因为后者不支持通过 HTML data-toggle 属性进行初始化。

由于后者的性能问题，我也想使用前一个库，但没有找到通过资产管道运送它的 gem，我创建了一个：bootstrap-toggle-rails。您可以在README 中找到文档。

但是：data-toggle 初始化方法也不适用于我与 Turbolinks 的结合，但您可以通过使用 JavaScript 手动初始化它并跳过 data-toggle 属性来使其工作，例如添加toggle 类：

$(document).on('ready page:change', function() {
  $('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});

除了 ready 事件之外，还要注意由 Turbolinks 触发的 page:change 事件。

【讨论】：

【解决方案2】：

如果您使用 >Rails 4 和 >Ruby 1.9

<%= f.check_box :email_notifications, :data => { :toggle => 'toggle' } %>

确保您的 HTML 生成正确。

<!-- Something like this -->
<input type="checkbox" name="email_notifications" data-toggle="toggle">

然后检查 JavaScript 控制台以确保没有错误。

【讨论】：

更改了erb代码，仔细检查了生成的html： .. 没有 JS 错误.. 想法？
嗯，我唯一注意到的另一件事是，您使用的 gem 已经超过 3 年没有更新引导切换资产。您可能想尝试手动包含引导切换资产而不是使用 gem。
看起来这是一个 turbolinks 问题.. 删除了 turbo 链接，它工作正常。，

【解决方案3】：

如果你想添加风格，简单的做：

<%= f.check_box :subscribed_to_news, data: { toggle: 'toggle', style: 'ios' } %>

【讨论】：