2016-06-23 26 views
0

(Sehr neu zu Schienen und Bootstrap) Ich arbeite an einem Projekt, in dem ich Elemente in ein HTML-Akkordeon, 10 Elemente um genau zu sein, einfügen möchte. Nur 3 der Elemente sind zusammenklappbar. Ich habe die Layouts und den Rendering-Teil der Rails-Dokumentation gelesen, aber ich bin immer noch sehr verwirrt darüber, wie man es macht, insbesondere wenn ich die reduzierbare Klasse nur 3 Elementen zuweisen muss. Jeder Rat ist hilfreich, danke im Voraus.Rails - Einfügen von ausgewählten Elementen vom Controller in Teil

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 %> 

Teil

<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 %> 

Die HTML-Akkordeon Struktur ich verwenden möchte:

<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> 

Antwort

1

Wenn ich Ihre Frage richtig verstanden habe, möchten Sie Teiltöne verwenden, um den von Ihnen geposteten HTML-Code zu generieren. Hier ist ein Vorschlag.

Ich glaube nicht, dass Sie eine .accordion-group um jeden Satz benötigen, die Sie kollabieren möchten. Du kannst einfach alles in eins stecken.

Hier ist die äußerste ERB-Vorlage.

<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> 

Teil _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> 

Teil _category.html.erb

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

Ein letzter Vorschlag. Es sieht so aus, als ob Sie eine alte Bootstrap-Version verwenden. Sie sollten möglicherweise ein Upgrade auf the latest version in Betracht ziehen.

UPDATE

Edited Kategorien @categories

Angenommen, Ihr Controller sieht so etwas zu sein.

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

Vielen Dank, habe ich versucht, diese letzte Nacht, aber es ist eine nicht definierte lokale Variable oder Methode 'Kategorien Fehler – Dotol

+0

@Dotol warf ich meine Antwort aktualisiert haben. Ich nahm an, dass Sie ein Array von Kategorien haben, die Sie in Ihrem Controller instanziieren. –