2010-03-17 2 views
16

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

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

или

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

Я использую первый вариант сейчас и интересно, если это плохо, чтобы включить множественный

...

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

+0

Каков ваш прецедент? Является ли это динамически генерируемым js? – jonnii

+0

Что будет примером динамически генерируемых js? Иногда мне нужно передать переменные из представления в функцию javascript во время выполнения. – TenJack

ответ

26

Я предпочитаю иметь выход взгляд компоновщика так:

<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 %> 

Мое рассуждение для этого подхода заключается в том, что доходность и содержание_входят в разном nt файлов. Это не DRY, чтобы поместить тег script для каждого content_for , но он позволяет синтаксическому маркеру распознавать изменение языка в каждом файле и помогает мне там.

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

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

+0

Я читал, что лучше всего разместить javascript в конце вашего макета непосредственно перед тегом, чтобы страница загружалась быстрее. Вы имели в виду использовать элемент ? – TenJack

+0

Я еще не слышал об этом, и, конечно, включил вещи в голову, но вы правы, согласно yahoo, http://developer.yahoo.com/performance/rules.html скрипты в голове могут замедлить загрузку. На основании этого я изменил свой ответ. – Tilendor

+0

@TenJack Насколько я знаю, загрузка javascript перед тегом позволяет браузерам начать загрузку html, css и изображений без ожидания всех js-файлов. Поэтому размещение ваших маленьких js-скриптов в строке не меняет ничего. В любом случае, этот пользовательский скрипт никогда не бывает большим; и если они станут такими, я перемещаю их в отдельные файлы .js. –

1

Вот решение, если вы действительно хотите, чтобы количество скриптов < было минимальным в вашем html и все еще было в состоянии иметь ярлык IDE. Это очень полезно с JQuery, если вы хотите только один $ (документ) .ready() вызов в вашем HTML или с facebook JavaScript API Карт Google для вызова JS, когда апи загружен, и т.д ...

layout_helper.rb:

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

application.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 будет более чистым.