0

所以我有一个具有两个不同导航标题的 Rails 应用程序。一个用于大多数页面，另一个导航标题仅用于少数页面。此外，由于导航加载在 application.html.erb 页面中（在应用程序的所有页面之间共享），除非用户刷新页面，否则永远不会从服务器刷新导航 html。由于每个页面都是通过 ajax（使用 pjax）加载的，这意味着当我在需要不同导航标题的两个页面之间移动时，导航标题不会更新。

我有一些可能的解决方案，但我不喜欢它们，因为我不想向我拥有的每个视图添加代码。主要解决方案是将导航标头移动到视图中（而不是全局 application.html.erb），或者将 javascript 添加到每个页面以检查导航是否正确，如果不正确则替换它。但是为了替换它，我不确定如何加载部分的 html，它包含来自模型的数据。

注意：直接访问每个 url 都可以。

我觉得我错过了一些简单的方法，因为这感觉应该是一个相当普遍的问题，但我在搜索时找不到任何东西。

编辑：我正在使用 jquery

4

3 回答 3

1

Jason，我假设您正在寻找一种方法来更改处于活动状态的选项卡的颜色。

如果正在呈现的 ajax 页面是一个显示视图，请将以下内容添加到 show.js.erb：

由于您没有包含代码，因此我做了两个假设。

假设 1：如果第二页处于活动状态，我假设它看起来像这样：

<div class="top_menu_bar">
<a class="menu_link controller_1" href="/controller_1">The First Controller</a>
<a class="menu_link controller_2 highlighted" href="/controller_2">The Second Controller</a>
<a class="menu_link controller_3" href="/controller_3">The Third Controller</a>
</div>

请注意，如果您的锚标记类中没有控制器名称，您可以轻松添加它们。它将简化您的 JQuery。但是，解决方案的关键部分是遵循我简要概述的两个步骤。您始终可以根据您的代码修改 JQuery 选择器。

假设 2：我假设您有一个 a.highlighted 的 css 规则，这将使任何具有突出显示类的锚从其他锚中脱颖而出。

现在，有了这些假设，让我们讨论一下更改导航的两步解决方案，当您单击页面上使用 Ajax 请求加载的链接或按钮时，说与标签 controller_3 关联的 :show 视图。

你需要做以下两件事：

Step 1: Remove the "highlighted" class from the anchor of
      controller_2
Step 2: Add the "highlighted" class to the anchor of controller 3.

您可以通过在 show.js.erb 文件中添加以下内容来做到这一点：

$('.highlighted').removeClass("highlighted");
$('.<%= controller_name %>').addClass("highlighted);

如您所见，我们在提供 show.js.erb 时动态插入 controller_name。请注意，您仍然需要句号前缀。

我相信这应该可以解决问题。上述代码中可能存在语法错误，因此请采用整体概念并将其应用于您的情况。为了您的方便，我在 jsfiddle 上放了一个小示例来演示代码的 javascript 部分。在http://jsfiddle.net/593ce/4/上查看。

我希望这对你有用，并且你认为这个答案是可以接受的。

于 2012-08-04T03:06:50.330 回答
1

由于您只有两个导航，因此在您的布局中生成它们并隐藏它们。

<div id="nav">
  <div id="nav1" class="nav" style="display: none"><a href="#">Nav1</a></div>
  <div id="nav2" class="nav" style="display: none"><a href="#">Nav2</a></div>
</div>

在您页面的 JS 中，创建一个显示您想要的函数的函数。当您通过 pjax 更新页面时，您需要传入一些 JS 来执行，用您想要的调用 chooseNav。

<script type="text/javascript">
  function chooseNav(sel) {
    $('#nav .nav').hide();
    $('#nav' + sel).show();
  }

  $(function() {
    chooseNav(1);  // Default nav to load when page loads
  });
</script>
于 2012-08-07T03:21:42.897 回答
0

如果您想继续用适当的部分替换导航，您可以在 AJAX 响应中放置以下内容（假设您使用的是 jquery）：

$('#navigation').html('<%= escape_javascript(render 'partial') %>');
于 2012-08-01T00:28:53.917 回答