扩展 rails simpleform 功能答案

【问题标题】：Extend rails simpleform functionality扩展 rails simpleform 功能
【发布时间】：2012-10-03 10:52:18
【问题描述】：

我有一个带有“simpleform”和“bootstrap-datepicker-rails”gem 的 rails 应用程序。

我尝试像这样使视图代码更具可读性：

f.input :birthday, :mydatefield, :options => {:icon => "calendar", :data-date => "21.12.2012", :data-format => "dd-mm-yyyy"}

此刻我写下这个：

<div class="input-append date" id="user_birthday" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <%= f.input_field :birthday, :disabled => true %>
    <span class="add-on">
        <i class="icon-calendar"></i>
    </span>
</div>

或者这个

<%= f.input :birthday, :wrapper => :datepicker, :wrapper_html=> {id: "user-birthday", class: "date"} do %>
    <%= f.input_field :birthday, :disabled => true %>
    <%= content_tag :span, :class => "add-on" do %>
        <%= content_tag :i, :style => "color:grey", :class => "icon-calendar" do
        end %>
    <% end %>
<% end %>

得到我的结果：

以上两者都取得了这个结果，效果很好：

<div class="control-group string required date" id="user-birthday">
    <label class="string required control-label" for="user_birthday"><abbr title="required">*</abbr> Birthday</label>
    <div class="controls">
        <div class="input-append">
            <input class="string required disabled" disabled="disabled" id="user_birthday" name="user[birthday]" size="50" type="text" />
            <span class="add-on">
                <i class="icon-calendar" style="color:grey"></i>
            </span>
        </div>
    </div>
</div>

当我尝试将变量解析到包装器时

:wrapper_html=> => {:data-date => "21-12-2012"}

它会抛出错误...

我必须做什么？我对扩展 gems 很陌生。

我必须写什么才能让它工作？

SimpleForm 包装器？
app/inputs/datepickerInput.rb?
初始化程序/datepicker.rb?
辅助方法？

一个例子会很有帮助！

非常感谢！

【问题讨论】：

:wrapper_html=> => {:data-date => "21-12-2012"} 你确定在这行描述吗？因为它有语法错误。它应该看起来像 :wrapper_html => {:data-date => "21-12-2012"}
对不起，错字。仅在stackoverflow上。在我的代码中是正确的。主要问题是属性中的“-”。因此，当我尝试时，“data-date-format”或“data-blah-blah”会引发异常：data-blah =>“xxx”它失败当我尝试时：test =>“xxx”它似乎正在工作
这些属性可以用引号传递，'data-blah' => 'value'

标签： ruby-on-rails ruby-on-rails-3 twitter-bootstrap

【解决方案1】：

您可以创建自定义字段。关注this tutorial 即可。

【讨论】：

据我了解，这个 tut 有点多余。它有效，但不完全。我已经制作了一个字符串变量，例如 '"options = "data-date-format"'，我稍后在代码中使用它而不是直接编写。但我的方法也是使用包装器。（包装器和变量的组合） . 也许partial也能做到这一点？
是的，部分可以工作。但我不确定它在语法上是否正确。
好的。谢谢你的建议。我将尝试部分并在此处发布结果。 :-)

【解决方案2】：

我已切换回 rails 实现的表单。对我（作为初学者）simple_form 似乎不够清楚。

对于我上面的解决方案，我创建了一个 FormBuilder：

class BootstrapFormBuilder < ActionView::Helpers::FormBuilder

  def birthday_field_with_hint_and_icons (name, *args)
    options = args.extract_options!
    birthday_field_icons(name) + hint(options[:hint])
  end

  def birthday_field_icons(name, *args)
    dd = 'data-date'
    ddf = 'data-date-format'
    content_tag :div, class: "input-append date", dd => 18.years.ago.strftime("%d-%m-%Y"), ddf => "dd-mm-yyyy", id: "user_birthday" do
      text_field(name, :disabled => 'disabled') + icon("icon-calendar")
    end
  end

  private

  def icon(icon)
    content_tag :span, class: "add-on" do
      content_tag :i, style: "color: grey;", class: icon do
      end
    end
  end

  def hint(hint)
    content_tag :span, class: "help-block" do
      hint
    end
  end
end

感谢您的帮助！

【讨论】：