Question

我正在以嵌套的形式使用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()

Answer 1

答案最终变成了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

我显示滑块旁边的值。在编辑表单中，这些值在初始表单屏幕中设置，因此我抓住它以使用＆＃39; setValue＆＃39;设置初始滑块值。

jQuery的第二部分实际上是相同的，但由于我使用cocoon作为嵌套变量，我需要基本上重复cocoon回调中的代码。这里默认滑块值为5很好。

Simple_form bootstrap_slider参数

1 个答案: