有没有在 Rails 视图中调用 javascript 函数？

Question

I am wondering if there's a way to call a javascript function:

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

get_url('#about');

Inside rails views links like this:

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

Notice this part:

class: "nav-link #{javascript(get_url('#about'))}"

Is there a way to do this? If not, is there a better way to do this?

Answer 1

You can defer that function call to client-side scripts:

1. add a class to these menu elements so that you can easily fetch all these, for example js-nav-link
2. in js on dom content loaded calculate and add necessary classes:

document.addEventListener('DOMContentLoaded', function(){
  let hash = window.location.hash;
  if(!!hash){
    let activeMenu = document.querySelector(`.js-nav-link[data-id="${hash}"]`);
    if(activeMenu){
      activeMenu.classList.add('active-menu');
    }
  }
});

Also you might want to look more deeply into utilising native anchors - give an id to an a -element ( link_to yields it), use window.location.hash to get # -part of url etc.

Answer 2

Trying to do this server side is a fools errand since the hash segment of a URL is not sent by browsers. But if I have understood you correctly and you just want to add a class to links that match the hash you can just do it with:

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