Проблема с Javascript в Rails — Ошибка ссылки не обнаружена: filterArticleToggle не определен

#javascript #ruby-on-rails #ruby

Вопрос:

У меня есть фрагмент кода javascript, который переключается между двумя различными представлениями статей.

При загрузке страницы индекса статьи я получаю следующую ошибку:

Ошибка неперехваченной ссылки: filterArticleToggle не определен

Я не знаю, что я сделал не так. Я использую тот же код для страниц профиля, и он отлично работает:

 filterArticleToggle = function () {
    const grid_articles_button = document.querySelector('#grid_articles')
    const list_articles_button = document.querySelector('#list_articles')
    const grid_articles_icon = document.querySelector('#grid_articles_icon')
    const list_articles_icon = document.querySelector('#list_articles_icon')
    const grid_articles_view = document.querySelector('#grid_articles_view')
    const list_articles_view = document.querySelector('#list_articles_view')

    if (grid_articles_button amp;amp; list_articles_button) {
        grid_articles_button.addEventListener('click', (e) => {
            e.preventDefault()

            grid_articles_icon.classList.add('text-brand-blue')
            grid_articles_icon.classList.remove('text-inherit')

            list_articles_icon.classList.remove('text-brand-blue')
            list_articles_icon.classList.add('text-inherit')

            fetch("/articles/switch_view/Grid").then(function(response) {
                return "ok"
            })

            grid_articles_view.classList.value = "sm:-mx-6 lg:-mx-0 flex flex-wrap"
            list_articles_view.classList.value = 'hidden'
        })

        list_articles_button.addEventListener('click', (e) => {
            e.preventDefault()

            grid_articles_icon.classList.remove('text-brand-blue')
            grid_articles_icon.classList.add('text-inherit')

            list_articles_icon.classList.add('text-brand-blue')
            list_articles_icon.classList.remove('text-inherit')

            fetch("/articles/switch_view/List").then(function(response) {
                return "ok"
            })

            list_articles_view.classList.value = "sm:-mx-6 lg:-mx-0 flex flex-wrap"
            grid_articles_view.classList.value = 'hidden'
        })
    }
}

document.addEventListener('turbolinks:load', () => {
    filterArticleToggle()
})

window.filterArticleToggle = filterArticleToggle
 

Это находится в article.js файл, загружаемый по мере загрузки страницы индекса статьи.

Любая помощь будет признательна.

Комментарии:

1. filterArticleToggle = function () является неявным глобальным, который не допускается в строгом режиме (и обычно рассматривается как плохая практика. Если вы хотите объявить именованную функцию, просто используйте объявление функции ( function filterArticleToggle() ... ) вместо выражения функции. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

2. Это сделало свое дело. Вы хотите добавить это в качестве ответа, а не комментария, и я отмечу это правильно?