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

修改您还必须确保使用CSS对其进行样式设置，使其看起来更像是制表符（如果您还没有）。：）

希望这会有所帮助。：）

Answer 2

如果您在多个地方使用相同或几乎相同的代码，通常只想使用部分代码。

当你说“索引页面”时，你真的想要使用在另一个控制器的索引中使用的相同代码吗？如果是这样，那么部分是最好的策略。

不要使用JavaScript来解决布局/代码组织问题。

Rails：在单个页面上渲染多个index.html.erb

2 个答案: