附加的唯一id来simple_form产生的无线电按钮输入和一个匹配值到相关联的标签

Question

我有以下对象：

# Table name: interests
#
#  id         :integer          not null, primary key
#  client_id  :integer
#  condition  :string(255)
belongs_to :client

我用下面的表单来创建新的对象：

= simple_form_for interest do |f|
  = f.error_notification

  .form-inputs
    = f.hidden_field :client_id, value: interest.client_id
    = f.input :condition, as: :radio_buttons, collection: ['Used', 'New'], boolean_style: :inline

  .form-actions
    = f.button :submit

我使这种形式在同一页面上多次和我有每个单选按钮，输入每个页面上的形式匹配相同的输入的ID的ID的问题。

这就是呈现多次在页面上：

<div class="input radio_buttons optional interest_condition">
  <label class="radio_buttons optional control-label">Condition</label>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition_used" name="interest[condition]" type="radio" value="Used">
      <label class="collection_radio_buttons" for="interest_condition_used">Used</label>
    </input>
  </span>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition_new" name="interest[condition]" type="radio" value="New">
      <label class="collection_radio_buttons" for="interest_condition_new">New</label>
    </input>
  </span>
</div>

我尝试的解决方案：

每个表单必须通过interest.client_id获得一个唯一的ID。我打算使用该ID，以确保每一个版本是唯一改变以下id上input的for和label的东西：

= f.input :condition, as: :radio_buttons, collection: ['Used', 'New'], 
    boolean_style: :inline, 
    input_html: { id: 'interest_condition' + interest.client_id.to_s}, 
    label_html: {for: 'interest_condition' + interest.client_id.to_s}

但这两个错误：

• 我失去通常是由收集产生的动态ID，每个id / for字面上interest_condition#{interest.client_id}而不是interest_condition_new#{interest.client_id}和interest_condition_used#{interest.client_id}。
• 和分配与label_html的for label_html: {for: 'interest_condition' + interest.client_id.to_s}赋值为单选按钮，而不是单选按钮后，本身自带标签的集合父标签for值（这与boolean_style: :inline启用）

由上面的代码生成的代码实例：

<div class="input radio_buttons optional interest_condition">
  <label class="radio_buttons optional control-label" for="interest_condition7">
    Condition
  </label>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition7" name="interest[condition]" type="radio" value="Used">
    <label class="collection_radio_buttons" for="interest_condition_used">
      Used
    </label>
  </span>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition7" name="interest[condition]" type="radio" value="New">
    <label class="collection_radio_buttons" for="interest_condition_new">
      New
    </label>
  </span>
</div>

我怎么会追加值习俗呈现在页面上的我的单选按钮id和form属性每个具体形式？

Answer 1

我认为你正在寻找一个协会在这里。尝试这个：

f.association :client, label_method: :condition

，看看是否有附加_#{id}到每个input#ids的

只要你能做到这一点：

Interest.first.client.condition

并获得了预期值，我觉得上面应该工作

Answer 2

至于（我希望是）一个临时的解决办法，我让页面加载，然后我更新所有input属性id和label for属性中使用的CoffeeScript的：

$ ->
  $('.ids-updated-by-js').each (index) ->
    $(this).find('span').each ->
      span = $(this)
      id = span.find('input').attr('id')
      span.find('input').attr('id', id + index)
      span.find('label').attr('for', id + index)
      console.log 'Updated radio button with id: ' + index + ' ' + id
    return

上面的JavaScript代码的版本：

$(function() {
  return $('.ids-updated-by-js').each(function(index) {
    $(this).find('span').each(function() {
      var id, span;
      span = $(this);
      id = span.find('input').attr('id');
      span.find('input').attr('id', id + index);
      span.find('label').attr('for', id + index);
      return console.log('Updated radio button with id: ' + index + ' ' + id);
    });
  });
});

这不是理想的，但它确实创造了理想的效果（只要项目没有支持noscript用户）。

Answer 3

我所遇到的地方，我需要的唯一标识号单选按钮集合中每个无线选项的情况下。

而不是创建一个自定义的输入和压倒一切的简单形式的CollectionRadioButtonInput或创建使用包装API定制包装器，我使用了namespace选项。

= f.input_field :my_field, as: :radio_buttons, namespace: "unique_prefix_to_be_prepended_to_id", boolean_style: :inline

命名空间将被加在多数SimpleForm基于您的模型和字段名称自动生成的ID。举例来说，假设我有一个用户下面的表格。

= simple_form_for @user do |f|
   = f.input_field :my_field, as: :radio_buttons, namespace: "unique"

该HTML <input>为“是”单选按钮选项标签都会自动unique_user_my_field_true的ID。在“否”单选按钮选项将有unique_user_my_field_false的ID。当然，这是您只使用一个是/否T / F的场景单选按钮假设。