Ruby on Rails: invia la variabile JavaScript dal controller al file di risorse Javascript esterno

Sto creando un sito web in Ruby on Rails. Ho un’azione del controller che esegue il rendering di una vista in questo modo:

def show time_left = Time.now.to_i - 3.hours.to_i @character = current_user.characters.find(params[:id]) respond_to do |format| format.html # show.html.erb format.xml { render :xml => @character } end end 

Questo va bene perché rende show.html.erb come mi piace. Vorrei comunque in qualche modo passare time_left alla vista come una variabile Javascript poiché questo valore è utilizzato da un plugin JQuery per il conto alla rovescia.

Potrei mettere un blocco javascript sulla pagina nel codice HTML e stampare una variabile di istanza in questo modo:

  $('#countdown').countdown('') 

Ma vorrei mantenere tutto il mio JS in un file esterno e fuori dalla pagina qualcuno potrebbe dare qualche consiglio su come implementarlo?

Si, puoi!

Riscrivi il tuo codice JS in funzione con un argomento (timelimit) e inseriscilo in un file esterno. Quindi puoi chiamare la funzione dalla vista e passare quella variabile @timeleft come argomento della funzione JS.

Breve esempio:

 #controller @time_left = Time.now.to_i - 3.hours.to_i 

.

 #javascript function count_down(time_left) { $('#countdown').countdown(time_left) } 

.

 #view <%=javascript_tag "count_down(#{@time_left})" -%> 

javascript_tag

Esempio non testato, è solo un’idea non completa. Non dimenticare di caricare quel file JS. Puoi utilizzare l’helper JS rails javascript_include_tag .

la tecnica di usare un parametro di funzione retro è una possibilità, ma devi sfuggire correttamente alla variabile che stai passando con escape_javascript o to_json + html_safe come spiegato di seguito.

Tuttavia, dal momento che si desidera influenzare i file esterni, le migliori tecniche saranno usare gon . Un’altra buona possibilità è usare gli attributi dei dati .

gon

Gemma specializzata per il lavoro: https://github.com/gazay/gon

Probabilmente la soluzione più robusta.

Gemfile:

 gem 'gon' 

controller:

 gon.timeleft = 1 

Layout app/views/layouts/application.html.erb :

    <%= include_gon %> <%= javascript_include_tag 'application' %> 

File di asset:

 gon.timeleft === 1 

dati-attributi

Aggiungi valori agli attributi, recuperali con le operazioni DOM JavaScript.

A volte chiamato “non invadente Javascript”.

Visualizza la testa:

 <%= javascript_include_tag 'application' %> 

Visualizza il corpo:

 <%= content_tag 'div', '', id: 'data', data: {timeleft: '1'} %> 

File di asset:

 $(function() { parseInt($('#data').data('key1')) === 1 }) 

Quanto segue illustra come escape_javascript e to_json funzionano per te in aggiunta alla risposta di retro.

escape_javascript

Alias: j .

Funziona solo su stringhe.

Consente di sfuggire i caratteri che possono avere significati speciali nelle stringhe JavaScript, come i backslash escape, in un formato adatto per inserire citazioni letterali stringa JavaScript.

Mantiene html_safe stato di input html_safe , quindi ha bisogno di html_safe altrimenti caratteri HTML speciali come < verrebbero scappati in < .

 <% a = "\\n<" %> <%= javascript_tag do %> f('<%= j(a) %>') // === '\\n<' f('<%= j(a).html_safe %>') // === '\\n<' <% end %> 

to_json + html_safe

Funziona perché JSON è quasi un sottoinsieme della notazione letterale dell'object Javascript .

Funziona non solo su oggetti hash, ma anche su stringhe, matrici e interi che vengono convertiti in frammenti JSON del tipo di dati corrispondente.

 <% data = { key1: 'val1', key2: 'val2' } %> <%= javascript_tag do %> var data = <%= data.to_json.html_safe %> f(data.key1) \\ === 'val1' f(data.key2) \\ === 'val2' <% end %>