使用 materialize rails 4.2 时无法添加 collection_select

Question

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

它不起作用，我的 collection_select 不会出现在屏幕上，但它会出现在源代码中，当我 'remove' 时 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>

Answer 1

我查看了 materialize 文档，发现我只需将 class browser-default 添加到我的 collection-select（link 到文档 http://materializecss.com/forms.html)

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

Answer 2

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

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

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

此外，如果您还使用带有 jQuery 的 turbolinks，您将需要添加 jquery.turbolinks gem 以使 $document.ready 功能正常工作。

记得在添加 jquery.turbolinks

后重新启动您的 rails 服务器

Answer 3

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

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

使用 materialize rails 4.2 时无法添加 collection_select

Cant add collection_select while using materialize rails 4.2

css

ruby-on-rails

ruby

materialize