Schienen: Rendering mehrerer index.html.erb auf einer einzigen Seite

Question

Ich verwende Registerkarten und möchte mehrere Indexseiten in Registerkarten laden. Zum Beispiel:

class AnimalsController < ApplicationController
  def index
    @dogs = Dog.all
    @cats = Cat.all
  end
end

Dann in meiner views/animals/index.html.erb

<ul class="tabs">
  <li>Dogs</li>
  <li>Cats</li>
</ul>
<div id="#dogs">
  <%= render @dogs %>
</div>
<div id="#cats">
  <%= render @cats %>
</div>

Ist das Refactoring in einen Teilbereich die einzige Möglichkeit, dies zu erreichen?

Ich möchte sie statisch auf einmal geladen haben und nicht zu tun eine Ajax.load() zurückgreifen müssen, wenn die Registerkarte angeklickt wird.

Answer 1

Die Antwort finden Sie in der Frage selbst. Warum verwenden Sie nicht einfach Javascript, um die beiden Teilbereiche auszublenden und sie aufzurufen, wenn die jeweilige Registerkarte angeklickt wird? Sie brauchen dafür überhaupt kein Ajax :)

Da Sie die Javascript-Bibliothek, die Sie verwenden, nicht erwähnt haben, werde ich eine generische Lösung mit Jquery geben:

Sie brauchen auch kein # zu den jeweiligen div's ids hinzuzufügen. Ändern Sie es in dies:

<ul class="tabs">
  <li id="dogs">Dogs</li>
  <li id="cats">Cats</li>
</ul>
<div id="dogs" class="subTabs">
  <%= render @dogs %><hr />
</div>
<div id="cats" class="subTabs">
  <%= render @cats %><hr />
</div>

$(document).ready(function() {
    $('.subTabs').hide(); //Hide the subTabs as soon as the DOM is loaded.

    $('li').live('click', function(e) {
        $('.subTabs').hide(); //Calling this again so as to remove an already loaded
                                tab, if any. You can refactor this part to make it
                                even simpler.
        $('body').find('.subTabs').attr('id',$(this).attr('id')).show();
             //This finds the ".subTabs" whose id is the same as the "li" id that
               was clicked and shows it. Ofcourse, even this can be made even more
               compact had i known your entire DOM structure.     
    });
});

Bearbeiten: Sie müssen auch sicherstellen, dass Sie sie mit CSS so gestalten, dass sie mehr wie Tabs aussehen, falls Sie das nicht schon getan haben :)

Ich hoffe, das hilft. :)