Question

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

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

注意：直接访问每个网址工作正常。

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

编辑：我正在使用jquery

Answer 1

杰森，我假设您正在寻找一种方法来更改活动标签的颜色。

如果正在渲染的ajax页面是一个show view，请将以下内容添加到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关联的视图。

您需要执行以下两项操作：

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

我希望这对你有用，你会发现这个答案可以接受。

Answer 2

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

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

Answer 3

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

$('#navigation').html('<%= escape_javascript(render 'partial') %>');

如何更新ajax页面加载的导航

3 个答案: