Question

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

它不起作用，我的collection_select不会显示在屏幕上，但它会显示在源代码中，当我删除＆＃39; 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文档，我发现我只需要将类browser-default添加到我的集合中 - select（链接到docs http://materializecss.com/forms.html）

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

Answer 2

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

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

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

此外，如果您还在使用jQuery的turbolink，则需要添加{{3}}以使$document.ready功能正常工作。

请务必在添加jquery.turbolinks

后重新启动rails服务器

Answer 3

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

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

使用materialize rails 4.2时无法添加collection_select

3 个答案: