Rails视图中是否有调用javascript函数的方法？

我想知道是否有方法调用javascript函数：

function get_url(link) {
  var url = window.location.href;
  var params = url.split('/')[3]
  return params == link ? 'active-menu' : ''
}

get_url('#about');

rails内部视图链接如下所示：

<li class="nav-item">
     <%= link_to "About", root_path(:anchor => 'about'), class: "nav-link #{javascript(get_url('#about'))}", :"data-id" => "about" %>
</li>

---

有办法做到这一点吗？如果没有，有更好的方法吗？

您可以将该函数调用推迟到客户端脚本：

向这些菜单元素添加一个类，以便轻松获取所有这些元素，例如

js nav link

在js on dom内容加载中，计算并添加必要的类：

document.addEventListener（'DOMContentLoaded'，function（）{
让hash=window.location.hash；
如果（！！散列）{
让activeMenu=document.querySelector（`.js nav link[data id=“${hash}]”）；
如果（活动菜单）{
activeMenu.classList.add（'active-menu'）；
}
}
});

---

此外，您可能希望更深入地研究如何使用本机锚定-为

a

-元素提供

id

（

link\u to

生成它），使用

window.location.hash

获取

#

-url等的一部分。

尝试在服务器端执行此操作是愚蠢的，因为url的哈希段不是由浏览器发送的。但是，如果我正确理解了您的意思，并且您只想将一个类添加到与哈希匹配的链接中，您可以使用：

document.addEventListener("DOMContentLoaded", function(){
  if (window.location.hash) {
    document.querySelectorAll('a.nav-link[href="#%"]'.replace('%', window.location.hash))
            .forEach(function(link){
               link.classList.add('active');
            });
  }
});

---

Rails与此问题无关。所以，基本上，您希望让JS向您的

标记中添加一些类，对吗？如果您只想根据需要添加类，那么该函数在视图（ruby）中比javascript更有意义url@Qubis741基本上我有三套菜单。另外两个菜单集，我使用了正常的rails助手方法，比如

current\u page？

和

request.fullpath

，这两种方法都很好用。既然params上有了这个

#

，我需要使用javascript来代替这种特定类型的菜单

localhost:3000/#contact

不会通过使用常规服务器端rails帮助程序（如

current\u page？

）调用。这就是为什么我改用

windows.location

的原因。是的，你可以在rails视图中运行js，但这对你一点帮助都没有。您可以使用

Node.js

或其他javascript运行时在服务器上运行javascript。但这段代码不会运行，因为js不会在浏览器中运行。这是一件愚蠢的差事，因为浏览器在发出请求时不会向服务器发送url的哈希组件。无论您运行的是Rails、Node还是神奇的unicorn框架，您都无法获取哈希值，因为它一开始就没有发送。您的全部问题是，您想使用Rails link_创建非标准链接，为什么不使用纯HTML并对其执行任何操作？

data get url path=“#about”

这不是

id

属性的作用吗？@max您是对的，因为滚动，所以没有看到这一点，edited@max很可能是X-Y问题

document.addEventListener("DOMContentLoaded", function(){
  if (window.location.hash) {
    document.querySelectorAll('a.nav-link[href="#%"]'.replace('%', window.location.hash))
            .forEach(function(link){
               link.classList.add('active');
            });
  }
});