Incluso javascript in linea usando content_for in rotaie

Sto usando content_for e yeild per iniettare i file javascript nella parte inferiore del mio layout, ma mi sto chiedendo quale sia la procedura migliore per includere javascript in linea. In particolare mi chiedo dove il mettere la dichiarazione script type:Incluso javascript in linea usando content_for in rotaie

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

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

Sto usando la prima opzione ora e si chiede se è male per includere più

...

dichiarazioni in un'unica vista. A volte ho parziali che portano a questo.

fonte

2010-03-17 TenJack

Qual è il tuo caso d'uso? È questo js generato dinamicamente? – jonnii

Quale sarebbe un esempio di js generato dinamicamente? A volte ho bisogno di passare le variabili da una vista ad una funzione javascript in fase di esecuzione. – TenJack

preferisco di gran lunga avere sguardo rendimento del layout in questo modo:

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

Poi in una vista che si può scrivere:

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

E nel _sub_view_with_javascript.html.erb parziale È possibile anche scrivere:

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

Il mio ragionamento per questo approccio è che la resa e il contenuto per quanto riguarda la differenza file nt. Non è VUOTO inserire il tag di script per ogni content_for ma consente all'evidenziatore della sintassi di riconoscere la modifica della lingua in ogni file e mi aiuta lì.

Se si dispone di più contenuto_per le chiamate in un singolo file allo stesso simbolo (nel nostro caso: javascript), prenderei in considerazione la possibilità di consolidarli tutti in alto, ma è perfetto per l'uso con partial.

E HTML è perfettamente felice di avere quanti blocchi di script desideri. L'unico trucco possibile è quando si lavora con il codice negli strumenti di sviluppo come firebug, ci vuole un po 'più tempo per trovare il giusto blocco di script per la propria funzione. Questo succede solo per me quando ho bisogno di impostare un breakpoint javascript per eseguire il debug.

fonte

2010-03-17 18:14:44 Tilendor

Ho letto che è meglio mettere il javascript alla fine del layout appena prima del tag in modo che la pagina si carichi più velocemente. Volevi usare l'elemento ? – TenJack

Non l'ho mai sentito prima, e ho incluso cose in testa come ovvio, ma hai ragione, secondo yahoo, http://developer.yahoo.com/performance/rules.html gli script in testa possono rallentare il caricamento. Ho cambiato la mia risposta sulla base di questo. – Tilendor

@TenJack Per quanto ne so, il caricamento di javascript poco prima del tag consente ai browser di avviare il download di html, css e immagini senza attendere tutti i file js. Quindi, mettere in linea i tuoi piccoli script js non cambia nulla. Ad ogni modo, quegli script personalizzati non sono mai grandi; e se diventano così, li sposto in file .js separati. –

Ecco una soluzione se si vuole veramente mantenere il numero di tag < script> minimo nel proprio html ed essere ancora in grado di avere il proprio IDE evidenziato javascript. E 'davvero utile con jQuery se si desidera solo un $ (document) .ready() chiamata nel tuo html o con facebook js api chiamare js quando l'API è caricato, ecc ...

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>

qualsiasi file di vista:

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

Questa soluzione di e Nable me per mantenere il mio codice organizzativo e leggibile nel mio IDE poiché non ho bisogno di creare parziali per ogni codice js. Anche se non cambia nulla per l'utente finale, il risultato html è più pulito.

fonte

2011-03-22 20:17:41 plehoux

Incluso javascript in linea usando content_for in rotaie

risposta

Problemi correlati