Rails 5 中的 Turbolinks 中断 Bootstrap Select 下拉菜单

Question

我在 Heroku 上有一个 Rails 5 应用运行，使用 Bootstrap 3。

我有这个表格：

.panel-body
  .form-group.has-feedback
    .text-muted
      = f.label :kind, 'Swim, Bike or Run?'
     = f.select :kind, Workout.kinds.keys.to_a.map { |s| [s.humanize, s] }, {}, class: 'select'

问题： 没有 Turbolinks 它呈现一个很好的'Select' 形式。使用 Turbolinks 它呈现一个普通的浏览器下拉菜单。我想呈现漂亮的 'Select' class 形式。我可以禁用 Turbolinks，但我需要在应用程序的其他地方使用它。

我需要启用 Turbolinks，因为我正在将数据从 .coffee 文件注入到表单中。

查看：

.panel-footer.panel-footer-condensed
  .heading-elements
    span.heading-text
      strong
        a(
          data-type="useTemplate"
          data-kind=template.kind
          data-distance=template.distance
          data-duration=template.duration
          data-notes=template.notes
         )
         | Use Template

咖啡文件：

$(document).on 'turbolinks:load', ->
  $('a[data-type="useTemplate"]').click (e) ->
    $('#workout_kind').val(e.target.dataset.kind)
    $('#workout_distance').val(e.target.dataset.distance)
    $('#workout_duration').val(e.target.dataset.duration)
    $('#workout_notes').val(e.target.dataset.notes)

问题：如何让下拉菜单保持 'Select' class 的样式？

如果还有其他更简单的解决方案，我也很想听听。我试过使用 .on 'page:load' 和 .on 'document:load' 但它不会将值注入表单。

谢谢

Answer 1

尝试这样做，

css_property_name1|2 表示 css 属性名称，如高度、宽度、行高、填充等，可应用于样式元素

    $(document).on 'turbolinks:load', ->
      $('.select').css
        'css_property_name1': 'property1value'
        'css_property_name2': 'property2value'

Answer 2

Turbolinks 弄乱了应用程序中的一大堆东西，所以我决定简单地删除 Turbolinks 并将我的咖啡文件改为：

$ ->
  $('a[data-type="useTemplate"]').click (e) ->
    $('#workout_kind').val(e.target.dataset.kind)
    $('#workout_distance').val(e.target.dataset.distance)
    $('#workout_duration').val(e.target.dataset.duration)
    $('#workout_notes').val(e.target.dataset.notes)

Rails 5 中的 Turbolinks 中断 Bootstrap Select 下拉菜单

Turbolinks in Rails 5 Break Bootstrap Select Dropdowns

javascript

ruby-on-rails

twitter-bootstrap

coffeescript

turbolinks