2012-01-26 10 views
8

Sto aggiornando una vecchia app per binari a 3.1. L'app è praticamente funzionante, ma ho alcune funzionalità ajax che devo aggiornare. (Se fa alcuna differenza sto usando jquery e coffeescript)Rails upgrade a 3.1 - modifica della gestione di ajax da "render: update" per rispondere a

Tutte le funzionalità Ajax esistenti sono state scritte usando render: updates. ad es.

Penso che il nuovo modo preferito per farlo sia utilizzare un respond_to? blocco per gestire il js, ma non sono sicuro del modo migliore di gestire questi diversi casi.

Per il primo caso (il page.remove) penso che con la linea di asset pipe, dovrei avere un js esterno in/app/assets/javascripts/per gestire il lato javascript (ad esempio il page.remove) ma sono non sono sicuro di come passare i parametri al file js. Sto indovinando si può fare qualcosa di simile:

respond_to do |format| 
    format.js {:render :js => {:ftof => params[:ftof_id]} 
end 

ma io non sono sicuro di come si poteva prendere questo in su da dentro il file js. È questo il modo giusto per passare le informazioni al js? O c'è un altro metodo che dovrei usare?

Per il secondo caso (il page.replace_html) penso che questo sia stato deprecato/rimosso da 3.1 (secondo apidock). Sospetto ancora che questo dovrebbe usare il file js nella directory app/assets/javascript, ma non sono sicuro di come dovrei fare per rendere il partial e passare queste informazioni nel js.

Grazie per tutti i puntatori in questo settore) =

risposta

31

utilizzare jQuery in collaborazione con js.erb vista e respond_to blocchi.

Qualunque sia questa azione è (diremo FoosController#update per fare un esempio):

render :update do |page| 
    page.remove "financial_tran_offset_#{params[:ftof_id]}" 
    page.replace_html 'details', :partial => 'details', :locals => {:obj => @fire} 
end 

sarebbe diventato:

respond_to do |format| 
    format.html 
    format.js  # <- this is what we're after 
end 

con un file di vista update.js.erb:

$('#financial_tran_offset_<%= params[:ftof_id] %>').remove(); 
$('#details').replaceWith('<%= escape_javascript(render(:partial => 'details', :locals => {:obj => @fire})) %>'); 

update.js.erb verrà analizzato da ERb, visualizzato come JS, rinviato al clien t via Ajax e eval'd.

È possibile passare tutto ciò che si desidera a questi modelli JS. Dopo tutto, sono file ERB. Utilizza <%= %> e le variabili di istanza come faresti con le visualizzazioni HTML/ERb. Se chiami render nelle tue visualizzazioni JS/ERb, esegui il wrapping con escape_javascript per eseguire correttamente il rendering dell'HTML.


render :update chiamate vecchi metodi JavaScriptGenerator di supporto per Prototype. La conversione in jQuery è piuttosto semplice dato che entrambi fanno la stessa cosa: selezionare un elemento DOM e manipolarlo.

Ecco una piccola tabella di conversione con le tipiche manipolazioni.Rimuovere metodi di supporto prototipo dal controller, e mettere la loro controparte jQuery o JS in una corrispondente vista JS/ERb:

 Prototype       jQuery/Javascript 
    in controller     in JS/ERb view (xxxxxx.js.erb) 
     ---------       ----------------- 
page.alert "message"     alert('message'); 
page.hide "id"      $('#id').hide(); 
page.insert_html \ 
     :top, "id", "content" $('#id').prepend('content'); 
     :bottom, "id", "content" $('#id').append('content'); 
     :before, "id", "content" $('#id').before('content'); 
     :after, "id", "content" $('#id').after('content'); 
page.redirect_to "url"    window.location.href = 'url'; 
page.reload       window.location.reload(); 
page.remove "id"      $('#id').remove(); 
page.replace "id", "content"   $('#id').replaceWith('content'); 
page.replace_html "id", "content" $('#id').html('content'); 
page.show "id"      $('#id').show(); 
page.toggle "id"      $('#id').toggle(); 

Non dimenticate i vostri punti e virgola su ogni linea!

+0

cool. c'è comunque un modo per farlo con coffeescript, o sei limitato al solo straight in update.js.erb? –

+0

Se vuoi davvero usare CoffeeScript, potresti farlo, ma il supporto nelle viste dinamiche è discutibile da quello che posso dire. (Personalmente preferisco direttamente JS.) CoffeeScript per semplici jQuery one-liner è un po 'eccessivo. '$ ('# id'). append ('content');' a '$ ('# id'). aggiungi 'content''. Non vale la pena di salvare un insieme di parentesi. JQuery è compatto e abbastanza semplice. Tanto vale che tienilo d'occhio. – Substantial

+0

Grazie per la risposta molto dettagliata! –