javascript - Rails 5 中的 Turbolinks 中断 Bootstrap 选择下拉菜单

Question

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

我有这个表格:

.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 它会呈现一个漂亮的“选择”表单。 使用Turbolinks它会呈现一个正常的浏览器下拉列表。我想渲染漂亮的“选择”类表单。我可以禁用 Turbolinks，但我需要在应用程序的其他地方使用它。

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

查看:

.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”类的样式？

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

谢谢

Answer 1

尝试这样做，

css_property_name1|2 表示 css 属性名称，如 height、width、line-heigth、padding 等，可应用于元素的样式

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