2011-06-18 12 views
5

Hay varias preguntas a lo largo de esta publicación relacionadas con el título. El tema general de la publicación podría resumirse como "¿Qué estoy perdiendo/Cómo lo haces mejor?"Rails 3.0/3.1, JQuery & Ajax Mejores prácticas

A través de los métodos habituales de Google/screencasts/API, acabo de aprender un conocimiento básico sobre cómo usar el combo Rails 3.0-JQuery-Ajax.

Me quedan algunas preguntas (¿son considerables?). En Railscast 242, Ryan acaba de realizar la actualización final de la página por tener lo siguiente:

$("#products").html("<%= escape_javascript(render("products")) %>"); 

Al principio, esto parecía muy extraño, y todavía parece un poco extraño: la plantilla es consciente index.js.erb que la página index.html tiene un div '#products', y la plantilla index.js.erb en sí misma es lo que emite el comando de actualización? Esto me parece una ligera violación de la separación de preocupaciones: ¿no debería ser JS en la página index.html lo que realmente actualiza la página con los datos que recibe de la publicación, en lugar de la secuencia de comandos del servidor? siendo lo que realmente actualiza la página? Además, esto parece un poco frágil. Por la razón estúpida, si cambio el nombre de div en index.html para decir '#products_collection' y me olvido de cambiar index.js.erb, entonces mi página index.html seguirá funcionando, pero mi actualización de Ajax no lo hará. Me gustaría saber si cree que los puntos anteriores son válidos/qué hacer con ellos si lo son.

Si es necesario, puedo explicar esas cosas: si piensas en la acción del índice como un todo, entonces no es gran cosa que index.js sepa sobre index.html. Pueden estar estrechamente relacionados, pero en cierto modo deberían/​​pueden ser. Y cualquier clase de prueba descubriría el cambio de nombre div. multa. Pero ...

Ahora llego a la idea de ir más abajo en el agujero del conejo Ajax: supongamos que carga el nuevo formulario en la página índice a través de un Ajax get, y luego lo envía a través de una publicación de Ajax. Siguiendo el mismo patrón, su archivo create.js.erb podría tener un aspecto similar al siguiente:

create.js.erb?

$("#products").prepend("<%=escape_javascript(render 'product_as_table_row', :product => @product))%>"); 

Ahora mi acción de creación también es consciente de cómo se ve mi página de índice. Hmm ... supongamos que también queremos hacer el comportamiento relativamente estándar de proporcionar un mensaje al usuario a través del flash:

create.js.erb?

<% flash.each do |key, value| %> 
    $("div#flash").html("<div class='<%=key%>'><%=value%></div>"); 
<% end %> 
$('div#flash div').fadeOut(10000); 

$("#products").prepend("<%=escape_javascript(render 'product_as_table_row', :product => @product))%>"); 

Ahora, además de lo que me parece estar más cerca de acoplamiento-que-Me-como entre el índice y crear, tengo esta actualización flash grande y gordo en mi plantilla JS. No veo cómo puedo abstraer esto - ¿Puedo incluir esto en un método? ¿Dónde lo pongo? Incluso si puede ser envuelto en un método, ¿no será necesario que cada plantilla de create.js y update.js llame a esa función y que no esté desteñida? ¿Es este el propósito de la herencia de vista en 3.1? ¿Sostiene que Ajax hace que el flash sea innecesario, ya que el usuario ahora verá su producto allí mismo en la página?

¿Qué tal una falla en la creación? ¿Esto también se lanza al create.js.erb?

create.js.erb

<% if @thought.new_record? %> 
    <%# ??? Throw in Validation-Error Form Updates? Display a Modal Dialog? %> 
<% else %> 
    $("#products").prepend("<%=escape_javascript(render 'product_as_table_row', :product => @product))%>"); 
<% end %> 

En resumen, he aprendido cómo ejecutar peticiones GET y POST, pero no veo cómo aplicar un patrón general Ajax a un recurso de toda seco y correctamente, o más allá de eso, a lo largo de mi solicitud.Lo que he encontrado parece estar bien para las cosas pequeñas, pero no en general. La discreta JS puede ser agradable en abstracto, pero por el momento parece ser muy obstructiva en gran parte de mi aplicación. Como nunca hice Ajax en Rails 2.x, no tengo nada sobre lo que construir. Entonces ... Todo este aparente descuido me parece que no puede ser The Rails Way para hacer cosas. ¿Qué me estoy perdiendo? Cualquier y toda visión apreciada.

Respuesta

1

Creo firmemente Le recomiendo que eche un vistazo al siguiente artículo de uno de los miembros principales del equipo rails_ujs, que incluye todas las referencias al pie: rails-2-remote-links-and-forms

+0

Aunque hace mucho tiempo, ¡muchas gracias por señalarme esto! este tipo de discusión es exactamente lo que estaba buscando. – MissingHandle

+0

Dado que acabo de obtener la insignia de "pregunta popular" para esto, pensé que actualizaría con lo que ahora debe ser conocimiento común para la mayoría de los profesionales, pero para los nuevos, la respuesta ahora radica en usar un marco de cliente JS como Backbone.js , o Angular.js, de los que no tenía conocimiento en el momento en que planteé la pregunta, y realmente, Backbone tenía solo 0.5 en ese momento. Soo. para aquellos que se encuentran con esto hoy, ¡la respuesta a sus problemas es Backbone.js! (o algo así) – MissingHandle

2

Usted puede envolver todo esto en funciones, y colocarlos en application.js, para que sus plantillas se pueden parecerse a

update_product("<%= escape_javascript(render("products")) %>"); 

add_product("<%=escape_javascript(render 'product_as_table_row', :product => @product))%>"); 

etc.. 

mismo vale para la actualización del flash y de control de errores

+0

Gracias, eso ayuda y creo que califica como la respuesta a mis preguntas. . Sin embargo, todavía hay algo insatisfactorio: lo único que parece abstraerse aquí es qué elemento DOM se actualiza. ¿Todavía no existiría, por ejemplo, una llamada al método update_flash en cada creación/actualización? ... – MissingHandle

+0

jQuery admite devoluciones de llamadas en varios puntos del ciclo de vida de la solicitud Ajax, por lo que puede agregar una devolución de llamada al finalizar/éxito, para ejemplo, y llame a update_flash desde allí –

+0

oh ... punto bueno! Debería echar un vistazo más de cerca a eso próximo. – MissingHandle

Cuestiones relacionadas