Rails 5 中的 Turbolinks 中断引导选择下拉菜单答案

【问题标题】：Turbolinks in Rails 5 Break Bootstrap Select DropdownsRails 5 中的 Turbolinks 中断引导选择下拉菜单
【发布时间】：2023-10-11 15:30:01
【问题描述】：

我有一个使用 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 文件将数据注入表单。

查看：

.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)

问题：如何让我的下拉菜单保持“选择”类的样式？

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

谢谢

【问题讨论】：

标签： javascript ruby-on-rails twitter-bootstrap coffeescript turbolinks

【解决方案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'

【讨论】：

【解决方案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)

【讨论】：