Simple form 引导程序3+；简单表单复选框

我正在尝试将Bootstrap3与简单的表单集成（来自master）

现在，我有以下几点：

config/initializers/simple\u form.rb:

SimpleForm.setup do |config|
  config.wrappers :default, class: :input,
    hint_class: :field_with_hint, error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label_input
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
  end

  config.default_wrapper = :default
  config.boolean_style = :nested
  config.button_class = 'btn'
end

SimpleForm.setup do |config|
  config.input_class = 'form-control'

  config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.wrappers :append, tag: 'div', class: "form-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-append' do |append|
        append.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.default_wrapper = :bootstrap
end

config/initializers/simple\u form\u bootstrap.rb:

SimpleForm.setup do |config|
  config.wrappers :default, class: :input,
    hint_class: :field_with_hint, error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label_input
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
  end

  config.default_wrapper = :default
  config.boolean_style = :nested
  config.button_class = 'btn'
end

SimpleForm.setup do |config|
  config.input_class = 'form-control'

  config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.wrappers :append, tag: 'div', class: "form-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-append' do |append|
        append.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.default_wrapper = :bootstrap
end

app/views/designe/sessions/new.html.haml

%div.panel.panel-auth
  %div.panel-heading
    %h3.panel-title Sign in
  %div.panel-body
    = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
      .form-inputs
        = f.input :email, :required => false, :autofocus => true
        = f.input :password, :required => false
        = f.input :remember_me, :as => :boolean if devise_mapping.rememberable?
      .form-actions
        = f.button :submit, "Sign in"
      %hr
    = render "devise/shared/links"

但是生成的HTML是错误的。好吧，根据BS2是对的，但根据BS3是错的。这是：

<div class="form-group boolean optional user_remember_me">
  <label class="boolean optional control-label" for="user_remember_me">
    Remember me
  </label>
  <div class="controls">
    <input name="user[remember_me]" type="hidden" value="0">
    <label class="checkbox">
      <input class="boolean optional form-control" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
    </label>
  </div>
</div>

记得我吗

但实际上应该是这样的：

  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>

看看我

也许可以修复围绕包装器的黑客攻击，但我无法让它工作。 有人能给我一些建议吗

---

干杯

正如您所说，您可以使用自定义包装器：

 config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|

    # Form extensions
    b.use :html5

    # Form components
    b.wrapper tag: :label do |ba|
      ba.use :input
      ba.use :label_text
    end

    b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
  end

然后，您可以在输入中引用：

 = f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable?

但是请注意，这不适用于集合复选框：

= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: @employee_roles, label: false

---

您可以尝试为后一种情况拼凑一个自定义输入，但这有点混乱。也许其他人知道更好的方法。。。也许simple_form会很快赶上bootstrap 3。

在我们等待Rafael实现bootstrap 3的同时，这里有一个快速解决复选框问题的方法：

---

确保将“config.bootstrap3=true”添加到初始值设定项中…

下一个配置非常适合我使用bootstrap3：

SimpleForm.setup do |config|
  ...
  config.boolean_style = :inline
  ...
end

简单自定义包装器

config.wrappers :inline_checkbox, :tag => 'div', :class => 'checkbox', :error_class => 'has-error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label_input
end

用法：

= f.input :remember_me, :label => t('user.remember_me'), :as => :boolean, :wrapper => :inline_checkbox

---

我对复选框有以下要求：

<div class="checkbox">
    <input type="hidden" value="0" name="...">
    <label>
        <input type="checkbox" value="1" name="..."> Label text
    </label>
</div>

标签文本

隐藏输入是从标签中提取的，因为它在标签单击时未选中复选框。我不知道为什么，但我不能仅仅使用config生成这样的html，所以这里是config+自定义输入类

# Config
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|
  # Form extensions
  b.use :html5
  b.use :placeholder

  b.use :input

  b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
  b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
end

# Input goes to app/inputs/inline_checkbox_input.rb
class InlineCheckboxInput < SimpleForm::Inputs::Base
  def input
    out = ''
    out << @builder.hidden_field(attribute_name, value: 0).html_safe
    out << "<label>"
    out << @builder.check_box(attribute_name, {}, 1, nil)
    out << "#{options[:label]}</label>"
    out
  end
end

# Usage
= f.input :name, :label => 'Label text', :wrapper => :checkbox, :as => :inline_checkbox

#配置
config.wrappers:checkbox，tag:：div，class:“checkbox”，error_class:“has error”do | b|
#表单扩展
b、 用途：html5
b、 使用：占位符
b、 用途：输入
b、 用法：提示，用：{tag:：p，class:“help block”}
b、 用法：错误，用{tag:：span，class:“help block text danger”}
结束
#输入转到app/inputs/inline\u checkbox\u Input.rb
类InlineCheckboxInput：inline\u复选框

您可以使用以下功能：

<%= f.input :remember_me, as: :boolean, :label => false, :inline_label => "Remember me" if devise_mapping.rememberable? %>

false，：inline_label=>“记住我”如果设计_mapping.rememberable？%%>

我为Bootstrap 3复选框找到了一个非常简单的解决方案。假设您已经配置了bootstrap 3包装器，我所要做的就是在

app/inputs

中添加一个自定义输入作为

checkbox\u input.rb

：

class CheckboxInput < SimpleForm::Inputs::BooleanInput
  # this exists to make the default 'boolean' css class in the form-group to be 'checkbox' instead
end

用作：

= f.label :frequency
= f.input :frequency, collection: @membership_plan.interval_frequencies, as: :radio_inline

---

没用。它还在添加“表单控件”类，这会把一切都搞砸/它正在添加一个“表单控制”类？我在你的初始值设定项中看不到。。。除非你是说“组队”？如果没有，则可能正在进行其他操作（可能是自定义输入？）。请确保在更改simple_form_bootstrap.rb初始值设定项后重新启动服务器，否则更改将不会生效。刚刚在我这边再次测试过，输入行中的“wrapper:：checkbox”工作正常。请注意，我也在使用simple_表单的主分支（3.0.0版）。。。rubygems（2.1.0）引用的版本很可能发生了变化。尝试将您的gemfile引用更改为：“gem‘simple_form’、github‘plataformatec/simple_form’”，并运行gem update这对我来说非常有用，只需稍加调整。请确保在表单输入中添加选项

：wrapper=>：checkbox

。这对我来说非常有效，谢谢！您不必为每个输入字段指定：wrapper=>：checkbox，只需将其添加到simple_form initialiser:config.wrapper_mappings={：boolean=>：checkbox}的顶部，使用Bootstrap 3的发行版和simple form 3.0.0这非常有效，正如@mwalsher现在接受的答案所说的那样。你把它放在simple\u form.rb还是simple\u form\u bootstrap.rb中？每个人都不断推荐这个解决方案，但它对我不起作用。