Где я могу разместить свою javascript для конкретной c страницы в приложении Rails 5.2? - PullRequest
0 голосов
/ 17 апреля 2020

В настоящее время у меня есть следующие script в двух моих представлениях формы.

<script>

$('#standard_calendar').calendar();
$('#time_calendar').calendar({type: 'time'});

</script>

Где я могу разместить их, чтобы они были доступны, но не смешивались с моими HTML?

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

В идеале ваши сценарии должны быть предварительно упакованы и объединены в один файл, чтобы избежать нескольких HTTP-запросов. Вместо того, чтобы полагаться на загрузку определенного набора JavaScript на определенной странице c, вы можете просто добавить атрибут или класс данных к элементу body и использовать его для переключения вашего поведения. Это не только лучше для производительности, но и позволит избежать проблем, связанных с турболинками и постоянным сеансом браузера при посещении страницы. поддерживается в течение некоторого времени, но я решил это, в основном выполнив:

<body data-action="<%= action_name %>" data-controller="<%= controller_name %>">

$(document).on('turbolinks:load', function(){
  let data = $('body').data();
  // pagescript: is just the namespace for the events to avoid potential name collisions 
  // Use whatever you want instead
  $(document).trigger('pagescript:' + data.controller + '#' + data.action, data)
             .trigger('pagescript:' + data.controller + '#*', data)
             .trigger('pagescript:' + '*#' + data.action , data);
});

Это вызывает набор пользовательских событий при каждом изменении страницы. Вы можете добавить прослушиватели событий для прослушивания определенных c страниц или действий:

// A specific controller_name and action
$(document).on('pagescript:controller_name#action_name', (e) => { });
// Any action belonging to a specific controller
$(document).on('pagescript:controller_name#*', (e) => { });
// Any action matching action_name
$(document).on('pagescript:*#action_name', (e) => { });

Например:

$(document).on('pagescript:users#new', (e) => { 
  alert("Welcome new user!");
});

Но эту проблему также можно решить с помощью лучшего дизайна кода. Подумайте о модулях, которые можно использовать для улучшения поведения на любой странице, вместо того, чтобы писать код, улучшающий этот c doodad на указанной c странице.

0 голосов
/ 17 апреля 2020

У вас есть два варианта (я полагаю, у вас установлен веб-упаковщик):

  1. Вы можете создать новый файл js в папке app/javascript/components. А затем импортируйте этот файл в application.js. application.js является точкой входа для всех javascript - через <% = javascript_pack_tag 'application'%> в application.html.erb. Тогда ваш скрипт будет вызываться на всех страницах.
  2. Или, но это будет работать, только если вы не используете turbolinks, вы можете создать новый файл для вашего скрипта в app/javascript/packs и затем в соответствующем представлении. Вы вызываете свой скрипт с помощью <%= javascript_pack_tag 'file_name' %>. Поэтому, если вы называете свой файл calendar.js, это будет <%= javascript_pack_tag 'calendar' %> Тогда ваш скрипт будет вызываться только на этой странице одного просмотра.

Еще один совет, если вы последуете второму варианту и если у вас есть main <%= javascript_pack_tag 'application' %> в application.html.erb внизу:

Это будет означать, что вы вызываете скрипт календаря перед тем, как отобразить main application.js, что может привести к ошибкам. Чтобы избежать этого, создайте второй доход в application.html.erb и используйте его так:

application.html.erb
<body>
    <%= yield %>
    <%= render "shared/footer" %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>

    <%= yield(:after_js) %>
  </body>

И тогда, по вашему мнению, вы можете сделать следующее:

views/somthing/index.html.erb
...
<%= content_for :after_js do %>
  <%= javascript_pack_tag 'calendar' %>
<% end %>

Этот поток будет следующим: application.html.erb отображает тело и включает в себя код html из файлов представления. Затем он отображает нижний колонтитул (например). Затем он вызывает application.js, что может импортировать некоторый общий код JS и пакеты. И тогда второй yield снова вызывает блок в представлении, в котором есть скрипт c для календаря.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...