如何向simple_form自定义包装器添加额外数据：icon

Question

波纹管图像显示我用html做的事情没有简单的形式。

这是旧代码：

<%= f.input :name  %>
<i class="fa fa-question-circle" data-toggle="popover" data-placement="top" data-content="content of the popover" data-trigger="hover"></i>

屏幕截图：

它工作正常，但我想使用简单的形式增强此代码，所以我创建了一个自定义包装器，但我无法将数据发送到触发器中的toggle和触发器.etc

我试过这个但是没有正常工作 这是我的表格：

<%= simple_form_for(@product ,wrapper: :product_form) do |f| %>
  <div class="form-inputs">
    <%= f.input :name , icon: "fa fa-question-circle"  %>
    <%= f.input :wholesale_price %>
    <%= f.input :percentage %>
    <%= f.input :quantity %>
    <%= f.input :sell_price %>
  </div>    
<% end %>

这是我的自定义包装器：product_form

config.wrappers :product_form, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label, class: 'control-label col-sm-3'
b.wrapper tag: 'div', class: 'input-icon col-sm-6' do |ba|
  ba.use :input, class: 'form-control'
  ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
  ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
end
b.use :icon , input_html: {  "data-toggle" => "popover", "data-placement" => "top", "data-content" => "adasdasdadsasd", "data-trigger" => "hover" }
end

在检查输入后，我从上面的代码中得到的正确是在图标的类

<i class="fa fa-question-circle"></i>

任何帮助将不胜感激 以及如何使数据内容动态化，以便我可以在具有不同数据的许多输入中使​​用它

Answer 1

您要做的是创建自定义组件。简单表单已有一个名为icon的组件，因此您必须选择其他名称。有很好的文档here。这是一个基础实现：

module SimpleForm
  module Components
    module MyIcon
      def my_icon(wrapper_options = nil)
        @my_icon ||= begin
          content_tag :span, options[:my_icon_html] do
            options[:my_icon].to_s.html_safe if options[:my_icon].present?
          end
        end
      end

      def has_my_icon?
        my_icon.present?
      end
    end
  end
end

并将其包含在代码中：

module SimpleForm
  module Inputs
    class Base
      include SimpleForm::Components::MyIcon
    end
  end
end

我直接将options[:my_icon_html]传递给了content_tag，因此您可以使用它来动态传递属性。