0

ネストされたフォームで simple_form と bootstrap_slider を使用しています。セットアップ パラメータを渡すにはどうすればよいですか?

私はこれを使用しています

<%= f.input_field :proficiency, class: 'agt_prof_slider' %>

これは正常に動作します。このクラスは、別のフィールドを更新するために jquery によって使用されます。私ができなかったのは、初期値を設定することです。Bootstrap_slider はこれを望んでいます:

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3">

f.input_field に「data-slider-value」を含めるにはどうすればよいですか? これはネストされたセクションの一部であるため、自動生成された ID などが必要です。フォームが編集画面で機能するように、スライダーに元の値を取得する必要があるだけです。

クラス「agt_prof_slider」は、jquery で使用するものです。たとえば、

$('.agt_prof_slider').slider()
4

1 に答える 1

0

答えは、より多くの jQuery になりました。これが私の解決策です。

元の形式:

<div id="int_skill_container" >
  <%= f.simple_fields_for :int_skills do |skill| %>
    <%= render 'int_skill_fields', :f => skill %>
  <% end %>
  <%= link_to_add_association "Add a Skill Pair", f, :interpreter_skills, :partial => 'int_skill_fields', :class => 'btn btn-primary' %>
</div>

フィールド：

<div class='nested-fields'>
  ...
  <td>
    <b><span class="agt_prof_slider_val"><%= f.object.proficiency or 5 %></span></b>&nbsp;&nbsp;&nbsp;
    <%= f.input_field :proficiency, class: 'agt_prof_slider' %>
  </td>
  ...
</div>

そしてjQuery

mySlider = $('.agt_prof_slider').slider()
mySlider.each ->
  init_val = parseInt($(this).closest("td").find('.agt_prof_slider_val').text())
  $(this).slider('setValue', init_val)
$('.agt_prof_slider').on 'slide', (slideEvt) ->
  $(this).closest("td").find('.agt_prof_slider_val').text slideEvt.value

$('#int_skill_container').on 'cocoon:after-insert', (e, insertedItem) ->
  insertedItem.find('.agt_prof_slider').first().slider()
  insertedItem.find('.agt_prof_slider').first().on 'slide', (slideEvt) ->
    $(this).closest("td").find('.agt_prof_slider_val').text slideEvt.value

スライダーの横に値を表示します。編集フォームでは、初期フォーム画面でこれらの値が設定されているので、それを取得して「setValue」でスライダーの初期値を設定します。

jQuery の 2 番目の部分は実際には同じですが、ネストされた変数に cocoon を使用しているため、基本的に cocoon コールバックでコードを繰り返す必要がありました。ここでは、デフォルトのスライダー値 5 で問題ありません。

于 2016-05-24T15:31:08.467 に答える