Incluyendo javascript en línea usando content_for en rieles

Estoy usando content_for y yeild para inyectar archivos javascript en la parte inferior de mi diseño, pero me pregunto cuál es la mejor práctica para incluir inline javascript. Específicamente me pregunto donde el poner la declaración de tipo de script:Incluyendo javascript en línea usando content_for en rieles

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

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

estoy usando la primera opción ahora y preguntándose si es malo para incluir múltiples

...

declaraciones dentro de una vista. A veces tengo parciales que conducen a esto.

Fuente

2010-03-17 TenJack

¿Cuál es su caso de uso? ¿Esto es js generado dinámicamente? – jonnii

¿Cuál sería un ejemplo de js generado dinámicamente? A veces necesito pasar variables de una vista a una función de JavaScript en tiempo de ejecución. – TenJack

me gusta mucho más que tener aspecto de rendimiento de la disposición de la siguiente manera:

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

Luego, en una vista en la que se puede escribir:

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

Y en el _sub_view_with_javascript.html.erb parcial también se puede escribe:

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

Mi razonamiento para este enfoque es que el rendimiento y content_for están en diferente nt archivos. No es DRY poner la etiqueta del script en cada content_for pero permite que el resaltador de sintaxis reconozca el cambio de idioma en cada archivo y me ayude allí.

Si tiene múltiples content_for llamadas en un solo archivo al mismo símbolo (en nuestro caso,: javascript) consideraría consolidarlas todas en la superior, pero es perfecto para usar con parciales.

Y HTML está muy contento de tener tantos bloques de scripts como desee. El único posible problema es cuando se trabaja con el código en las herramientas de desarrollo como Firebug, toma un poco más de tiempo encontrar el bloque de script adecuado para su función. Esto solo me sucede cuando necesito establecer un punto de interrupción de JavaScript para depurar.

Fuente

2010-03-17 18:14:44 Tilendor

He leído que es mejor poner el javascript al final de su diseño justo antes de la etiqueta para que la página cargue más rápido. ¿Quiso utilizar el elemento ? – TenJack

No había escuchado eso antes, e incluía cosas en la cabeza como una cuestión de rutina, pero tiene razón, de acuerdo con Yahoo, http://developer.yahoo.com/performance/rules.html las secuencias de comandos en la cabeza pueden ralentizar la carga. Cambié mi respuesta en base a esto. – Tilendor

@TenJack Por lo que sé, cargar javascript justo antes de la etiqueta permite a los navegadores comenzar a descargar html, css e imágenes sin esperar todos los archivos js. Así que poner tus pequeños scripts js en línea no cambia nada. De cualquier manera, esos guiones personalizados nunca son grandes; y si se vuelven así, los muevo a archivos .js separados. –

Aquí hay una solución si realmente desea mantener el número de < script> tag minimum en su html y aún así poder tener su IDE resaltado en javascript. Es realmente útil con jQuery si desea que sólo uno $ (document) llamada ready() en su html o con facebook js js API para llamar cuando se carga el API, etc ...

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>

cualquier archivo de vista:

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

Esta solución correo Me permite mantener mi código organizado y legible en mi IDE ya que no necesito crear un parcial para cada código js. Incluso si no cambia nada para el usuario final, el resultado html es más limpio.

Fuente

2011-03-22 20:17:41 plehoux

Incluyendo javascript en línea usando content_for en rieles

Respuesta

Cuestiones relacionadas