Rails - 从控制器中部分插入 select 个元素

Question

（rails 和 bootstrap 的新手）我正在做一个项目，我想在其中将元素插入 html 手风琴中，准确地说是 10 个元素。只有 3 个元素是可折叠的。我已经阅读了 Rails 文档的布局和渲染部分，但我仍然很困惑如何去做，尤其是必须将可折叠的 class 分配给仅 3 个元素。任何建议都有帮助，提前致谢。

x.HTML.erb

<h4>
    <a href="#">
        <li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
    </a>
</h4>


<% category.subcategories.each do |cat| %>
    <li><%= link_to cat.name, catalogo_path(cat_id: cat.id), remote: true %></li>

<% end %>

部分

<h4>
    <a href="#">
        <li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
    </a>
</h4>
<% category.subcategories.each do |cat| %>
    <li><%= link_to cat.name, catalogo_path(cat_id: cat.id), remote: true %></li>
<% end %>

我要使用的HTML手风琴结构：

<div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <h4>
                        <a href="#">Angulos</a>
                    </h4>
                    <h4>    
                        <a href="#">Soleras</a>
                    </h4>
                    <h4>
                        <a href="#">Semiflechas</a>
                    </h4>
                    <h4>
                        <a href="#">Redondos</a>
                    </h4>
                    <div class="accordion-heading">
                        <h4>
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">Cuadrados</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="accordion-body collapse in">
                        <a href="#" class="accordion-inner">Cuadrados Normales</a>
                        <a href="#" class="accordion-inner">Cuadrados Retorcidos</a>
                    </div>
                    <h4>
                        <a href="#">Canal</a>
                    </h4>
                    <h4>
                        <a href="#">Vigas IPR</a>
                    </h4>
                    <h4>
                        <a href="#">Vigas IPS</a>
                    </h4>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading"> 
                        <h4>
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">Placas</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="accordion-body collapse">
                        <a href="#" class="accordion-inner">Placa de Rollo</a><br>
                        <a href="#" class="accordion-inner">Placa de Grado</a>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading"> 
                        <h4>
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseThree">Laminas</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="accordion-body collapse">
                        <a href="#" class="accordion-inner">Laminas Calientes</a><br>
                        <a href="#" class="accordion-inner">Laminas Frias</a>
                        <a href="#" class="accordion-inner">Laminas Antiderrapantes</a>
                    </div>
                </div>
            </div>

Answer 1

如果我对你的问题的理解正确，那么你想使用 partials 来生成你发布的 HTML。这是一个建议。

我认为您不需要 .accordion-group 围绕每个要折叠的集合。你可以把所有东西都放在一个里面。

这是最外面的 ERB 模板。

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <%= @categories.each do |category| %>
      <% if category.subcategories.any? %>
        <%= render partial: "category_with_sub", locals: {category: category} %>
      <% else %>
        <%= render partial: "category", locals: {category: category} %>
      <% end %>
    <% end %>
  </div>
</div>

部分_category_with_sub.html.erb

<div class="accordion-heading">
  <h4>
    <a href="#">
      <li><%= link_to category.name, catalogo_path(cat_id: category.id), class: "accordion-toggle", "data-toggle" => "collapse", remote: true %></li>
    </a>
  </h4>
</div>

<div id="collapseOne" class="accordion-body collapse in">
  <% category.subcategories.each do |cat| %>
    <li><%= link_to cat.name, catalogo_path(cat_id: cat.id), class: "accordion-inner", remote: true %></li>
  <% end %>
</div>

部分_category.html.erb

<h4>
  <a href="#">
    <li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
  </a>
</h4>

最后一个建议。看起来您使用的是 bootstrap 的旧版本。您可能需要考虑升级到 the latest version.

更新

将类别编辑为@categories

假设您的控制器看起来像这样。

class CategoriesController < ApplicationController
  def index # or whatever action you want
    @categories = Category.all # or whatever query you want to use
  end
end

Rails - 从控制器中部分插入 select 个元素

Rails - Inserting select elements from controller in partial

ruby

ruby-on-rails

render

partial