Есть ли способ вызвать функцию javascript в представлении Rails?

Question

Мне интересно, есть ли способ вызвать функцию javascript:

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

get_url('#about');

Внутри рельсов просматриваются такие ссылки:

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

Обратите внимание на эту часть:

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

Есть ли способ сделать это? Если нет, есть ли лучший способ сделать это?

Answer 1

Попытка сделать это на стороне сервера - глупое поручение, поскольку сегмент ha sh URL не отправляется браузерами. Но если я вас правильно понял, и вы просто хотите добавить класс к ссылкам, которые соответствуют га sh, вы можете просто сделать это с помощью:

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

Answer 2

Вы можете отложить этот вызов функции до сценариев на стороне клиента:

1. добавить класс к этим элементам меню, чтобы вы могли легко получить все эти элементы, например js-nav-link
2. в js при загрузке содержимого DOM рассчитайте и добавьте необходимые классы:

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

Также вы можете более подробно изучить использование собственных якорей - дать id для a -элемент (link_to дает его), используйте window.location.hash, чтобы получить # -часть url et c.