Включение встроенного javascript с использованием content_for в rails

Я использую content_for и yield для вставки файлов javascript в нижнюю часть моего макета, но мне интересно, как лучше всего включать встроенный javascript. В частности, мне интересно, где разместить объявление типа сценария:

<% content_for :javascript do %> 
  <script type="text/javascript"> ... </script>
<% end %>

or 

<% content_for :javascript do %> ... <% end %>
  <script type="text/javascript">
    <%= yield :javascript %>
  </script>
<% end %>

Сейчас я использую первый вариант и задаюсь вопросом, плохо ли включать несколько

...

объявления в одном представлении. Иногда у меня есть частички, которые приводят к этому.


ruby-on-rails javascript content-for
person TenJack    schedule 17.03.2010    source источник
comment
Каков ваш вариант использования? Это динамически сгенерированный js?   -  person jonnii    schedule 17.03.2010
comment
Что может быть примером динамически сгенерированного js? Иногда мне нужно передать переменные из представления в функцию javascript во время выполнения.   -  person TenJack    schedule 17.03.2010

Ответы (2)


arrow_upward
32
arrow_downward

Я предпочитаю, чтобы выход макета выглядел так:

<html>
  <!-- other stuff -->
  <body>
   <!-- other stuff  -->
   <%= yield :javascript %>
  </body>
</html>

Затем в представлении вы можете написать:

<% content_for :javascript do %>
  <script type='text/javascript'>
    function doMagic() {
      //Mind-blowing awesome code here
    }
  </script>

<% end %>

<!-- More view Code -->

<%= render :partial => "sub_view_with_javascript" %>

И в частичном _sub_view_with_javascript.html.erb вы также можете написать:

<% content_for :javascript do %>
  <script type='test/javascript'>
     function DoMoreMaths() {
       return 3+3;
     }
   </script>
<% end %>

Мой аргумент в пользу этого подхода заключается в том, что yield и content_for находятся в разных файлах. Добавлять тег script для каждого содержимого_для но не СУХО, это позволяет подсветке синтаксиса распознавать изменение языка в каждом файле и помогает мне в этом.

Если у вас есть несколько вызовов content_for в одном файле для одного и того же символа (в нашем случае: javascript), я бы рассмотрел возможность объединения их всех в один верхний, но он идеально подходит для использования с частичными символами.

И HTML совершенно счастлив иметь столько блоков сценария, сколько вам нужно. Единственная возможная проблема заключается в том, что при работе с кодом в инструментах разработчика, таких как firebug, требуется немного больше времени, чтобы найти правильный блок скрипта для вашей функции. Это происходит только для меня, когда мне нужно установить точку останова javascript для отладки.

person Tilendor    schedule 17.03.2010
comment
Я читал, что лучше всего помещать javascript в конец вашего макета непосредственно перед тегом ‹/body›, чтобы страница загружалась быстрее. Вы хотели использовать элемент ‹head›? - person TenJack; 17.03.2010
comment
Я не слышал об этом раньше и, конечно, включал вещи в голову, но вы правы, согласно yahoo, developer.yahoo.com/performance/rules.html в голове могут замедлить загрузку. Я изменил свой ответ на основе этого. - person Tilendor; 17.03.2010
comment
@TenJack Насколько я знаю, загрузка javascript непосредственно перед тегом ‹/body› позволяет браузерам начать загрузку html, css и изображений, не дожидаясь всех файлов js. Так что размещение ваших маленьких js-скриптов ничего не меняет. В любом случае, эти пользовательские сценарии никогда не бывают большими; и если они становятся такими, я перемещаю их в отдельные файлы .js. - person Benjamin Crouzier; 29.03.2013
comment
тест/javascript -> текст/javascript - person MegaTux; 21.07.2016

arrow_upward
1
arrow_downward

Вот решение, если вы действительно хотите, чтобы количество тегов ‹ script> было минимальным в вашем html, и при этом иметь возможность выделять javascript в IDE. Это действительно полезно с jquery, если вы хотите, чтобы только один вызов $(document).ready() в вашем html или с facebook js api вызывал js при загрузке API и т. д.

layout_helper.rb :

  def javascript_jquery_ready(script)
    content_for(:javascript_jquery_ready) {
      script .gsub(/(<script>|<\/script>)/, "")
    }
  end

приложение.html.erb :

<script>
    $(document).ready(function(){
        <%= yield(:javascript_jquery_ready) %>
    });
</script>

любой файл просмотра:

<% javascript_jquery_ready (capture do %>
  <script>
    $('#share_access_link').click(function(){
      $('#share_access_form').slideToggle();
    }); 
  </script>
<% end) %>

Это решение позволяет мне упорядочивать и читать мой код в моей среде IDE, поскольку мне не нужно создавать партиал для каждого кода js. Даже если это ничего не изменит для конечного пользователя, результат html будет чище.

person plehoux    schedule 22.03.2011