Rails: рендеринг нескольких index.html.erb на одной странице

Question

Я использую вкладки и хочу загрузить несколько страниц индекса во вкладки. Например:

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

Тогда в моих представлениях / 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>

Является ли рефакторинг в частичное единственным способом добиться этого?

Я бы хотел, чтобы они загружались статически одновременно, и не нужно прибегать к выполнению Ajax.load () при нажатии на вкладку.

Answer 1

У вас есть ответ в самом вопросе. Почему бы вам просто не использовать javascript, чтобы скрыть эти две части и вызывать их при нажатии на соответствующую вкладку? Для этого вам совсем не нужен ajax:)

Поскольку вы не упомянули используемую вами библиотеку javascript, я дам общее решение с использованием jquery:

Также вам не нужно добавлять # к идентификаторам вашего соответствующего div. Измените это на это:

<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.     
    });
});

Edit: Вы также должны убедиться, что вы стилизуете его с помощью CSS, чтобы он выглядел больше как вкладки, если вы еще этого не сделали. :)

Надеюсь, это поможет. :)

Answer 2

Обычно вы хотите использовать только частичное, если вы используете один и тот же или почти один и тот же код в нескольких местах.

Когда вы говорите «индексная страница», вы действительно хотите использовать тот же код, который используется в индексе другого контроллера? Если это так, то частичное является лучшей стратегией.

Не используйте JavaScript для решения проблемы организации макета / кода.