3

我创建了一个带有 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>
4

3 回答 3

4

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

    <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, class: "browser-default" %>
于 2015-05-09T19:50:58.613 回答
1

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

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

在下面app/assets/javascripts/查找文件以将其放入。

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

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

于 2015-07-27T17:32:02.050 回答
0

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

$(document).on('turbolinks:load', function() {
  $('select').material_select();
})
于 2016-07-06T14:59:18.013 回答