Пользовательская функция javascript не работает в рельсах 5 с Turbolinks - PullRequest
Новая
       18

Пользовательская функция javascript не работает в рельсах 5 с Turbolinks

0 голосов
/ 25 мая 2020

Я новичок в javascript, и у меня возникают проблемы с получением настраиваемой функции для работы в приложении Rails 5. Я пытаюсь добавить простую функцию, которая устанавливает активную ссылку в заголовок панели навигации bootstrap. У меня есть все, чтобы работать в коде, но когда я добавляю его в свое приложение Rails, оно не работает. Я знаю, что javascript работает, потому что я использую bootstrap, и эти функции работают правильно. Я также думаю, что скрипт загружается, проверяя источники в Chrome инструментах разработчика, и он там. Однако установка точки останова никогда не срабатывает.

Я прочитал около 30 похожих вопросов, и ни один из них не помог решить мою проблему, поэтому я очень надеюсь, что кто-то сможет помочь мне преодолеть это препятствие.

Вот код, который я написал:

HTML

<nav class="navbar navbar-light bg-light navbar-expand-md fixed-top header-bg">
  <%= link_to image_tag(asset_path('jungers_farm/jungers_logo.png'),
                  width: '50', height: '50'),
                 root_path, class:'navbar-brand col-4 menu-brand' %>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
          data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar-list-2">
    <ul class="navbar-nav justify-content-center" id="main-nav-list">
      <li class="nav-item">
        <%= link_to 'Home', root_path, class: 'nav-link active' %>
      </li>
      <li class="nav-item">
        <%= link_to 'Training', page_path('training'), class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%= link_to 'Breeding', page_path('breeding'), class: 'nav-link' %>
      </li>
    </ul>
  </div>
</nav>

Javascript

$('.navbar-nav .nav-link').click(function(){
  $('.navbar-nav .nav-link').removeClass('active');
  $(this).addClass('active');
})

Application. js file ( мой код настроен. js в app / assets / javascripts) 

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require popper
//= require rails-ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require custom
//= require_tree .

Вот код, показывающий, что он работает в этой среде и что я пытаюсь выполнить sh.

Codepen

UPDATE Итак, моя первоначальная проблема заключалась в том, что код не загружался после DOM из-за турболинков. Я добавил следующий код, и теперь он работает. 

$( document ).on('turbolinks:load', function() {
    ... original code ...
})

Однако код не работает, как в моем коде. Активная ссылка не меняется должным образом. Ссылка, которая изначально была помечена как активная, остается активной независимо от того, по какой ссылке щелкнули. Есть ли другие проблемы с загрузкой страницы, которую мне не хватает?

1 Ответ

1 голос
/ 26 мая 2020

Итак, я обнаружил, что при использовании Turbolinks в Rails 5 вы должны использовать событие Turbolinks, чтобы гарантировать запуск вашего кода javascript. Обычный JQuery $ (окно) не всегда помогает. Например, вы можете сделать следующее, чтобы запускать свой код один раз после начальной загрузки страницы и снова после каждого посещения Turbolinks. 

$( document ).on('turbolinks:load', function() {
  $('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
  }) 
})

Turbolinks 5

Подробнее о событиях Turbolinks здесь: События Turbolinks . И еще о Turbolinks 5 здесь: Turbolinks 5 .

...