JQuery, rjs, js.erb JavaScript no intrusivo


#1

Veamos, estoy desarrollando mi aplicación y me dispongo a terminar de
iterar una de las acciones que he hecho (en otro post lo he explicado).
Mi duda es: ¿Cuál es la forma más correcta para desarollar con JQuery y
Rails JavaScript no intrusivo?

Teniendo en cuenta que tengo las siguientes vistas:

plantilla.html.haml:

= div_flash(flash[:error])

  • form_for :cambio, :url => cambiar_club_path(@club) do |f|
    %h1#equipo= "Listado de Jugadores del " + h(@club.nombre)
    %h2#titulares Titulares
    =render_partial(‘jugadores/listado’, @titulares)
    %h2#suplentes Suplentes
    =render_partial(‘jugadores/listado’, @suplentes)
    %h2#no_convocados No convocados
    =render_partial(‘jugadores/listado’, @no_convocados)
    =f.submit ‘Cambiar’

_listado.html.haml:

%table
%thead.atributos
%tr
%th{:scope => “col”} Posición
%th{:scope => “col”} Nombre
%th{:scope => “col”} Apellidos
%th{:scope => “col”} Velocidad
%th{:scope => “col”} Resistencia
%th{:scope => “col”} Regate
%th{:scope => “col”} Robo
%th{:scope => “col”} Pase
%th{:scope => “col”} Tiro
%th{:scope => “col”} Portero
%th{:scope => “col”} Calidad
%th{:scope => “col”} Edad
%th{:scope => “col”} Sueldo
%th{:scope => “col”} Claúsula
%tfoot
%tr
%td{:colspan => “14”}= total_jugadores(listado.count)
%tbody

  • for jugador in listado
    %tr.jugador
    %th{:scope => “row”}= jugador.posicion
    %td= h jugador.nombre
    %td= h jugador.apellidos
    %td= h jugador.velocidad
    %td= h jugador.resistencia
    %td= h jugador.regate
    %td= h jugador.robo
    %td= h jugador.pase
    %td= h jugador.tiro
    %td= h jugador.portero
    %td= h jugador.calidad
    %td= h jugador.edad
    %td= h jugador.sueldo
    %td= h jugador.clausula
    %td.selector= radio_button(“jugador”, “cambio1”, jugador.id)
    %td.selector= radio_button(“jugador”, “cambio2”, jugador.id)
    %br

Y en el fichero application.js he hecho lo siguiente:

var clicks = 2

$(document).ready(function(){
$("#cambio_submit").remove();
$(".selector").remove();
$(".jugador").click(function(){
if(clicks == 2 || clicks == 1)
$(this).animate({backgroundColor: “#68BFEF”,
color: “white”}, 500)
if(clicks == 0)
$(".jugador").animate({backgroundColor: “#ccddff”,
color: “black”}, 500);
clicks–;
if(clicks == -1)
clicks = 2;
});
});

Pero supongo que esta forma de hacer las cosas está muy mal. ¿Cuál sería
la mejor forma de estructurarse?


#2

Yo lo veo bastante no intrusivo la verdad: no hay nada de Javascript
en tus vistas, ni ningún evento enlazado desde el html.

¿Qué problema le ves?

Lo único que se me ocurre es que en lugar de meter ese churro de JS,
que es bastante específico de esa vista, en un fichero js lo metas con
un content_for en la vista correpondiente.

A ver si alguien te sabe contestar mejor.

2008/11/24 Carlos Belizón removed_email_address@domain.invalid:


#3

El 24/11/2008, a las 22:45, Carlos
Belizón escribió:

A eso me refería, ¿Cómo estructurar directorios y ficheros para una
correcta modularización de las acciones JavaScript?

Hombre puedes estructurar de manera sencilla, al estilo de las vistas
de la aplicación. Igual que se suele hacer con los *.css

Yo uso este código en el header -ten en cuenta que está en Haml:

-if File.exists?(RAILS_ROOT+"/public/stylesheets/
#{params[:controller]}/#{params[:action]}.js")
%script{:type => “text/javascript”, :src => “/javascripts/
#{params[:controller]}/#{params[:action]}.js”}

Así que solo te quedaría montar una estructura /
javascript/“controlador”/“accion”.js

Con esto no solo lo tendrás estructurado sino que solo cargarás el JS
necesario para cada vista, y si hay código que sea general para todas
las vistas pues al aplication.js

No se si me he explicado muy bien pero espero que la idea se entienda,
cualquier duda ya sabes.


#4

Fernando B. wrote:

Yo lo veo bastante no intrusivo la verdad: no hay nada de Javascript
en tus vistas, ni ningún evento enlazado desde el html.

¿Qué problema le ves?

Lo único que se me ocurre es que en lugar de meter ese churro de JS,
que es bastante específico de esa vista, en un fichero js lo metas con
un content_for en la vista correpondiente.

A ver si alguien te sabe contestar mejor.

2008/11/24 Carlos Belizón removed_email_address@domain.invalid:

A eso me refería, ¿Cómo estructurar directorios y ficheros para una
correcta modularización de las acciones JavaScript?


#5

Jordi V. Alvarez wrote:

Hombre puedes estructurar de manera sencilla, al estilo de las vistas
de la aplicaci�n. Igual que se suele hacer con los *.css

Yo uso este c�digo en el header -ten en cuenta que est� en Haml:

-if File.exists?(RAILS_ROOT+"/public/stylesheets/
#{params[:controller]}/#{params[:action]}.js")
%script{:type => “text/javascript”, :src => “/javascripts/
#{params[:controller]}/#{params[:action]}.js”}

Yo también uso HAML, ¿Y dónde debería de poner ese código? ¿Y qué
consigo con ello?

As� que solo te quedar�a montar una estructura /
javascript/“controlador”/“accion”.js

Con esto no solo lo tendr�s estructurado sino que solo cargar�s el JS
necesario para cada vista, y si hay c�digo que sea general para todas
las vistas pues al aplication.js

No se si me he explicado muy bien pero espero que la idea se entienda,
cualquier duda ya sabes.

Si pudieras extenderte un poco más, me habrías ayudado de una forma
increíble ;).


#6

utiliza livequery y lowpro para jquery, asi puedes tener tus formularios
y
links no intrusivos, es decir , que funcionen con y sin ajax

Saludos!

Atte.
Miguel Michelson Martinez

www.artenlinea.com

2008/11/24 Carlos Belizón removed_email_address@domain.invalid


#7

Atte.
Miguel Michelson Martinez

www.artenlinea.com

2008/11/24 Miguel M. removed_email_address@domain.invalid

utiliza livequery y lowpro para jquery, asi puedes tener tus formularios y
links no intrusivos, es decir , que funcionen con y sin ajax

y desde el lado del controller trata la llamada algo como esto

def index
@artist = User.find(params[:artist_id])
@series = @artist.series.order_by_id.paginate :page =>
params[:page],:per_page => 4

respond_to do |format|

  format.html # index.html.erb

  format.js do
    render :update do  |page|
      #page.alert "alert message"
      page.replace_html 'load_content', :partial => "series"
    end
  end

end

end

saludos!


#8

Miguel Michelson wrote:

utiliza livequery y lowpro para jquery, asi puedes tener tus formularios
y
links no intrusivos, es decir , que funcionen con y sin ajax

Saludos!

Atte.
Miguel Michelson Martinez

www.artenlinea.com

2008/11/24 Carlos Belizón removed_email_address@domain.invalid

¿Qué consigo gracias a esas librerías? Ya que no me queda claro que
funcionalidad es la que me aporta frente a jquery a pelo.


#9

El 25/11/2008, a las 19:12, Carlos
Belizón escribió:>>> -if File.exists?(RAILS_ROOT+"/public/stylesheets/

#{params[:controller]}/#{params[:action]}.js")
%script{:type => “text/javascript”, :src => “/javascripts/
#{params[:controller]}/#{params[:action]}.js”}

Buenas,

Tienes que ponerlo dentro del y lo que hace, como ya he dicho
antes, es cargarte el js que definas para cada página, poniendo los
*.js al estilo de las vistas de la aplicación royo /public/
javascripts/“controller”/“action”.js

Si aun y con esto no lo entiendes yo no se explicarlo mejor :wink:


#10

Carlos Belizón wrote:

Yo uso este c�digo en el header -ten en cuenta que est� en Haml:

-if File.exists?(RAILS_ROOT+"/public/stylesheets/
#{params[:controller]}/#{params[:action]}.js")
%script{:type => “text/javascript”, :src => “/javascripts/
#{params[:controller]}/#{params[:action]}.js”}

¿Dónde he de poner ese código? ¿Y qué consigo con ello?


#11

Jordi V. Alvarez wrote:

El 25/11/2008, a las 19:12, Carlos
Beliz�n escribi�:>>> -if File.exists?(RAILS_ROOT+"/public/stylesheets/

#{params[:controller]}/#{params[:action]}.js")
%script{:type => “text/javascript”, :src => “/javascripts/
#{params[:controller]}/#{params[:action]}.js”}

Buenas,

Tienes que ponerlo dentro del y lo que hace, como ya he dicho
antes, es cargarte el js que definas para cada p�gina, poniendo los
*.js al estilo de las vistas de la aplicaci�n royo /public/
javascripts/“controller”/“action”.js

Si aun y con esto no lo entiendes yo no se explicarlo mejor :wink:

Ya, ya te he entendido ;). De todas formas he estado mirando y remirando
y he encontrado un plugin que hace lo mismo que tu pero de modo más
elegante. Por si lo quieres:

http://agilewebdevelopment.com/plugins/javascript_auto_include

De todas formas, muchas gracias ;).


#12

jquery+livequery+low pro, te permite convertir links html y formularios
html
normales en formularios ajax, pero en el caso que el usuario desactive
javascritp los links y los formularios funcionan normalmente.

un ejemplo de eso seria el siguiente: (entendiendo que ya cargaste esas
3
librerias js)

en application js

//Paginacion no intrusiva
jQuery(function($) {
$(’ div.pagination a’).attach(Remote.Link, {
type: ‘GET’,
dataType: ‘script’ ,
beforeSend:function(){
//alert(‘cargando’);
$(’.message’).fadeIn(‘slow’);
},
complete:function(){
$(’.message’).fadeOut(‘slow’);
}
});
});

y en el controller

def show
@artists = User.with_art_works.recently_updated.paginate :page =>
params[:page],:per_page => 9
#@artists = User
respond_to do |format|
format.html # show.html.erb
format.js do
render :update do |page|
#page.alert “alert message”
page.replace_html ‘photos’, :partial =>
“portfolios/small_photos”
end
end
end
end

la gracia de livequery es que te recarga el dom cuando el elemento es
cargado por ajax, eso significa que puedes usar esos elementos nuevos
que
aparecen por la consulta ajax y puede seguir manipulandolos con
javascritp,
lo que hace lowpro es que te permite encapsular funcionalidades de
manera
muy agradable , ademas viene con las funciones link.Remote y
Form.Remote,
que son las que se hacen el trabajillo in-obstrusivo

entonces lo que te hace es servir la pagina de dos formas una como
request
html normal y otra si pasa por ajax

aqui puedes ver un ejemplo funcionando

http://artenlinea.com/portfolios

saludos!

Atte.
Miguel Michelson Martinez

www.artenlinea.com

2008/11/25 Carlos Belizón removed_email_address@domain.invalid


#13

Atte.
Miguel Michelson Martinez

www.artenlinea.com

2008/11/26 Carlos Belizón removed_email_address@domain.invalid

lo que hace lowpro es que te permite encapsular funcionalidades de
http://artenlinea.com/portfolios
sobre un elemento del documento se tengan en cuenta cuando se añanda
nuevos elementos al DOM del documento. Veo que esto me va ahorrar
bastantes quebraderos de cabeza a la hora de procesar llamadas AJAX que
incorporen nuevos elementos al DOM de mi HTML.

oh si!

Sin embargo sigo sin ver claro para qué sirve Lowpro, ya que la mayoría
de documentación que encuentro es para prototype y no para JQuery. Si
fueras tan amable de hacerme ver qué diferencia habría en tu código sin
el uso de lowpro me echarías un gran cable para ver cuál es su utilidad.

es cierto, low pro esta para prototype y luego se porta para jquery, la
gracia de lowpro es que te permite escribir el javascript mas al estilo
oop
, mira dicen por ahi que :

What is Low Pro? So what is Low Pro? It’s a plugin that provides a way
of
making more object-oriented JavaScript through event delegation.
jQuery’s
plugin architecture provides a really simple way of extending the core
functionality, but there is no easy way of making macros of code that do
several types of events on one element. Until now!"

por aqui puedes encontra rmas informacion

http://www.danwebb.net/2008/2/3/how-to-use-low-pro-for-jquery

google => lowpro+jquery

saludos!


#14

Sin embargo sigo sin ver claro para qué sirve Lowpro, ya que la
mayoría
de documentación que encuentro es para prototype y no para JQuery.

Echa un vistazo a este post,
<http://www.danwebb.net/2008/1/31/low-pro-for-jquery

A mi si me aclaro bastante las cosas.

Saludos.


#15

alarkspur wrote:

Sin embargo sigo sin ver claro para qu� sirve Lowpro, ya que la
mayor�a
de documentaci�n que encuentro es para prototype y no para JQuery.

Echa un vistazo a este post,
<http://www.danwebb.net/2008/1/31/low-pro-for-jquery

A mi si me aclaro bastante las cosas.

Saludos.

Si no he entendido mal, Lowpro lo que hace es proporcionarme una forma
de crear clases de una forma más sencilla para modular mejor mis scripts
¿Me equivoco mucho?


#16

2008/12/1 Carlos Belizón removed_email_address@domain.invalid

alarkspur wrote:

Si no he entendido mal, Lowpro lo que hace es proporcionarme una forma
de crear clases de una forma más sencilla para modular mejor mis scripts
¿Me equivoco mucho?

Hola chicos,

estamos alargando el offtopic mucho, vamos a dejarlo aquí. En todo caso,
existen estupendas listas para hablar del tema como

http://lists.scriptia.net/listinfo.cgi/jquery-es-scriptia.net
http://javaescript.scriptia.net/


#17

Miguel Michelson wrote:

jquery+livequery+low pro, te permite convertir links html y formularios
html
normales en formularios ajax, pero en el caso que el usuario desactive
javascritp los links y los formularios funcionan normalmente.
la gracia de livequery es que te recarga el dom cuando el elemento es
cargado por ajax, eso significa que puedes usar esos elementos nuevos
que
aparecen por la consulta ajax y puede seguir manipulandolos con
javascritp,
lo que hace lowpro es que te permite encapsular funcionalidades de
manera
muy agradable , ademas viene con las funciones link.Remote y
Form.Remote,
que son las que se hacen el trabajillo in-obstrusivo
entonces lo que te hace es servir la pagina de dos formas una como
request
html normal y otra si pasa por ajax

aqui puedes ver un ejemplo funcionando

http://artenlinea.com/portfolios

saludos!

Vale, ya he entendido bien la funcionalidad de LiveQuery, sirve más que
nada para que los eventos y demás modificaciones que se hagan vía JS
sobre un elemento del documento se tengan en cuenta cuando se añanda
nuevos elementos al DOM del documento. Veo que esto me va ahorrar
bastantes quebraderos de cabeza a la hora de procesar llamadas AJAX que
incorporen nuevos elementos al DOM de mi HTML.

Sin embargo sigo sin ver claro para qué sirve Lowpro, ya que la mayoría
de documentación que encuentro es para prototype y no para JQuery. Si
fueras tan amable de hacerme ver qué diferencia habría en tu código sin
el uso de lowpro me echarías un gran cable para ver cuál es su utilidad.