使用物化导轨4.2时无法添加collection_select答案

【问题标题】：Cant add collection_select while using materialize rails 4.2使用物化导轨4.2时无法添加collection_select
【发布时间】：2015-07-20 12:51:26
【问题描述】：

我创建了一个带有 category_id 迁移的类别模型（基本上 Mackenzie Child 在他的视频 https://www.youtube.com/watch?v=814gCeOpM4o 从 25 分钟开始所做的一切），我希望它出现在我的表单中。

它不起作用，我的collection_select 不会显示在屏幕上，但它会显示在源代码中，并且当我“删除”css 框架时会实现。

我的代码：

<div class="container"> 
<div class="row">
    <%= form_for @post do |f| %>
        <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" } %>
        <br>
        <%= f.label :title %>
        <%= f.text_field :title %>
        <br>
        <br>
        <div class="row">
            <div class="input-field col s12">
                <%= f.label :text %>
                <%= f.text_area :text, class: "materialize-textarea" %>
            </div>
        </div>

        <br>
        <br>
        <%= f.label :creator %>
        <%= f.text_field :creator %><br>
        <%= f.submit %>
    <% end %>   
</div>

它在源代码中的显示方式：

    <select name="post[category_id]" id="post_category_id"><option value="">Choose a category</option>
        <option value="1">Marketing</option>
        <option value="2">Technology</option>
        <option value="3">Programming</option>
        <option value="4">Health and Fitness</option>
   </select>

【问题讨论】：

标签： css ruby-on-rails ruby materialize

【解决方案1】：

我查看了物化文档，发现我只需将类 browser-default 添加到我的 collection-select 中（链接到文档 http://materializecss.com/forms.html）

    <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, class: "browser-default" %>

【讨论】：

这个解决方案也为我解决了这个问题。但是你没有得到 Materialize 选择菜单。 :(

【解决方案2】：

如果您希望您的选择框以 Materialize CSS 方式而不是浏览器默认方式呈现，则删除 browser-default 类并使用相关 .coffee 文件中的此代码初始化选择框：

$(document).ready ->
  $('select').material_select
  return

在app/assets/javascripts/ 下查找要放入的文件。

此外，如果您还在 jQuery 中使用 turbolinks，则需要添加 jquery.turbolinks gem 以使 $document.ready 函数正常工作。

记得添加jquery.turbolinks后重启你的rails服务器

【讨论】：

【解决方案3】：

基于Toby 1 Kenobi 的回答和this one，我使用Rails 5 的解决方案是将$(document).ready 更改为$(document).on('turbolinks:load')，如下所示：

$(document).on('turbolinks:load', function() {
  $('select').material_select();
})

【讨论】：