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 中包含“数据滑块值”？这是嵌套部分的一部分，所以我需要自动生成的 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 内容的第二部分实际上是相同的，但是由于我使用 cocoon 来表示嵌套变量，因此我需要在 cocoon 回调中基本上重复代码。这里默认的滑块值 5 很好。

于 2016-05-24T15:31:08.467 回答