Включите один и тот же файл js в несколько файлов html .erb в Rails - PullRequest
0 голосов
/ 30 марта 2020

Файл javascript, включенный в один html.erb, сохраняется даже в другом представлении с другим URL-адресом? Например: предположим, что если я нажимаю кнопку Go в new, то пользователь перенаправляется на страницу show, и я включаю файл js только в new.html.erb, тогда файл js также доступен в show?

new. html .erb

<%= javascript_include_tag 'common' %>

Так же как функции в файле common.js доступны в my_domain/show так же, как это доступно в my_domain/new? Или я должен снова включить файл js в show.html.erb?

Также я хотел бы знать, как лучше включить тот же файл javacript в партиалы. Например, как показано ниже:

main. html .erb

<% if some_condition %>
  <% render partial: 'first_partial' %>
<% elsif some_other_condition %>
  <% render partial: 'second_partial' %>
<% else %>
  <% render partial: 'first_partial' %>
  <% render partial: 'second_partial' %>
<% end %>

_first_partial. html .erb

#some code
<%= javascript_include_tag 'common' %>

_second_partial. html .erb

#some code
<%= javascript_include_tag 'common' %>

Здесь, в условии main для if и elsif, я отображаю только одну из частичек, поэтому Я могу включить файл js в любое частичное, но для третьего условия else, поскольку обе части отображаются, как лучше всего включить файл js? а также я не могу включить файл js в main, потому что файл js вызывается после того, как html в части отображается.

1 Ответ

1 голос
/ 30 марта 2020

Нет, обычно код javascript недоступен в других представлениях, только в том, в котором вы его включаете. Поэтому вам нужно включить его снова.

Исключение будет иметь место, если оно есть в файле макета, например application.html.erb, поскольку оно включено во всех представлениях.

Если вы вызываете * В любом случае, пакет 1029 * в обоих партиалах, затем вы можете просто вызвать его в main после оператора if. Это будет загружено после загрузки частичных файлов. Может показаться странным, что требуется кусок javascript в файле, который, кажется, не содержит элементов html, которые вы используете в файле JS, однако партиалы - это просто способ организовать код в рельсах. В конце они будут объединены в один большой html файл.

В ваших комментариях вы сказали, что оператор if вложен в другой оператор if, так что, может быть, вам вообще не нужен javascript? Вставьте его в конец оператора if следующим образом:

<% if outer_if_statment %>
  <% if some_condition %>
    <% render partial: 'first_partial' %>
  <% elsif some_other_condition %>
    <% render partial: 'second_partial' %>
  <% else %>
    <% render partial: 'first_partial' %>
    <% render partial: 'second_partial' %>
  <% end %>
  <%= javascript_include_tag 'common' %>
<% else %>
...
<% end %>

Таким образом, он будет доступен для всех партиалов, но не будет, если внутренний оператор if не выбран.

Другая вещь : Javascript должен быть загружен в конце файла html в любом случае, чтобы пользователю не приходилось ждать его загрузки, пока он не видит элементы html. Если мы поместим javascript прямо в середине файла hmtl, как этот, мы нарушаем этот принцип.

Теперь есть помощник: вы можете определить в своем * втором yield 1016 *

 <body>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>

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

В видах вы можете назвать это так:

<%= content_for :after_js do %>
  <%= javascript_include_tag 'common' %>
<% end %>

Это будет гарантировать, что JS загружен в конце тела и что весь другой код JS загружается заранее (если есть какие-либо зависимости). И, если вы все еще хотите загружать его только в зависимости от условий, вы можете повторить оператор if внутри блока content_for.

В зависимости от того, как выглядит ваш скрипт JS, вы также можете убедиться в этом выполняется только в том случае, если на странице найден необходимый элемент HTML. Представим, что вы хотите добавить прослушиватель событий на кнопку.

// common.js
const button = document.querySelector("#red-button")
if (button) {
  button.addEventListener(...)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...