Rails, link_to, mootools e l'unobstrusive javascript

2008/3/12 Marco M. [email protected]:

Avete ragione l’ultima versione di prototype, la 1.6.2 che sto provando
ora supporta le funzioni a cascata (e forse anche la 1.5.0, sbagliavo
qualcosa io?) però, solo curiosità, non capisco perchè avere un doppio
selettore $ e il $$ per il css, tra l’altro questo restituisce un array
e bisogna ciclare tra gli elementi, mentre con jquery facendo esempio:
$(‘h2’).show(‘slow’).text(‘bla bla bla bla’)

anche in prototype puoi fare cose del genere:

$$(‘h2’).invoke(‘appear’, {duration: 0.5}).invoke(‘update’, ‘nuovo
testo’)

$$(‘h2’).invoke(‘setStyle’, {background: ‘red’})

Trovo anche un pò scomodo l’utilizzo di scrip.aculo.us, con la necessità
di inserire il costruttore, esempio:
onclick=“new Effect.toggle(‘attachment_new’,‘appear’); return false;”
non si possono usare le cascate anche per gli effetti? Io non ci sono
riuscito

Gli effeti puoi applicarli a cascata come nell’esempio precedente dove
uso
appear. Qui dovresti più che altro agiungere un handler all’evento click.
Potresti fare cosi:

$$(‘a.my_link_class’).invoke(‘observe’, ‘click’, function() {
$(attachment_new).appear() } )

Se è solo un link puoi fare:

$(‘link_id’).observe(‘click’, function() { $(‘hidden_div’).appear() });

Poi altra cosa: solitamente utilizzo una classe “.hidden” per nascondere
gli elementi… prototype (come anche jquery) utilizza gli style (per
prevalere su eventuali classi) ma facendo una show di un mio elemento
.hidden non lo mostra perchè lo show toglie (se c’è) il display:none
dallo style, mentre jquery fa un display: block, riuscendo così a
mostrare il contenuto

E’ vero, devi per forza mettere lo stile inline. Se proprio non vuoi
farlo,
potresti metterlo da js invece che dallo stile:
$$(‘div.hidden’).invoke(‘setStyle’, {display: ‘none’});

Pardon, rettifico una sintassi:

$$(collezione).setStyles({‘opacity’:0.5, ‘color’:’#ff0000’});

(le parentesi tonde…) :stuck_out_tongue:

Si certamente prototype permette di giocare con le classi, aggiungerle
rimuoverle ecc. ma con jquery facevo .show(‘slow’) ed avevo anche un
simpatico effetto di apparizione.

Grazie Stefano per la dritta, con .invoke a catena riesco ad applicare
le funzioni anche senza indicizzare, meno male, così è comodo! Non mi
funziona il parametro ‘slow’ e neanche il text, ma vedrò…

Per gli eventi, con prototype mi ci devo ancora cimentare, con mootools
vedo che è abbastanza comodo anche se continuo a preferire jquery

$(“tag.classe”).click(function(){
$("#ilmioid").show(‘fast’);
});

che messo nella ready viene associato all’inizio del documento:
$(document).ready(function() {

});

…a proposito della funzione ready, anche questa dovrei sostituire,
come siamo messi con gli altri framework? Spero non si debba utilizzare
la onload del body perchè mi ricordo di aver avuto problemi, tipo che
dovevo inventarmi giochetti per controllare l’avvenuto caricamento delle
cose

On Mar 12, 2008, at 4:51 PM, Marco M. wrote:

Poi altra cosa: solitamente utilizzo una classe “.hidden” per
nascondere
gli elementi… prototype (come anche jquery) utilizza gli style (per
prevalere su eventuali classi) ma facendo una show di un mio elemento
.hidden non lo mostra perchè lo show toglie (se c’è) il display:none
dallo style, mentre jquery fa un display: block, riuscendo così a
mostrare il contenuto

Nella documentazione di Prototype c’e’ scritto:

Element.show cannot display elements hidden via CSS stylesheets. Note
that this is not a Prototype limitation but a consequence of how the
CSS display property works.

http://www.prototypejs.org/api/element/show

S.

Grazie Andrea, ho risposto prima di leggere il tuo post :slight_smile:
Tutto chiaro, immaginavo fosse più che altro una questione di abitudine,
vedo che con qualsiasi framework si riesce a fare più o meno le stesse
cose

On Wed, Mar 12, 2008 at 6:16 PM, Marco M. <
[email protected]> wrote:

Si certamente prototype permette di giocare con le classi, aggiungerle
rimuoverle ecc. ma con jquery facevo .show(‘slow’) ed avevo anche un
simpatico effetto di apparizione.

puoi usare .appear({duration: 0.5})

:slight_smile:

…a proposito della funzione ready, anche questa dovrei sostituire,
come siamo messi con gli altri framework? Spero non si debba utilizzare
la onload del body perchè mi ricordo di aver avuto problemi, tipo che
dovevo inventarmi giochetti per controllare l’avvenuto caricamento delle
cose

Con prototype puoi fare:

document.observe(‘dom:loaded’, myFunction);

On Mar 12, 2008, at 6:16 PM, Marco M. wrote:

Si certamente prototype permette di giocare con le classi, aggiungerle
rimuoverle ecc. ma con jquery facevo .show(‘slow’) ed avevo anche un
simpatico effetto di apparizione.

Grazie Stefano per la dritta, con .invoke a catena riesco ad applicare
le funzioni anche senza indicizzare, meno male, così è comodo! Non mi
funziona il parametro ‘slow’ e neanche il text, ma vedrò…

Ho riportato il tuo esempio pari pari con la sintassi prototype, non
ho badato
che esistessero le funzioni :slight_smile:

Per gli eventi, con prototype mi ci devo ancora cimentare, con
mootools
vedo che è abbastanza comodo anche se continuo a preferire jquery

$(“tag.classe”).click(function(){
$("#ilmioid").show(‘fast’);
});

Io ho visto la luce quando ho scoperto LowPro:

Event.addBehavior({
“tag.classe:click”: function() { … },
#ilmioid”: function(e) { e.target.show(‘fast’) },
“a.remote”: Remote.Link
})

dove Remote.Link e’ una classe che definisce un behavior (insieme di
eventi da associare a un elemento).
Ovviamente puoi scriverti un tuo behavior. Per esempio questo l’ho
scritto per implementare il textfield di ricerca
di un sito, in modo che il contenuto esplicativo (“cerca film”)
scompaia quando riceve il focus e ricompaia quando perde
il focus e l’utente ha lasciato il campo vuoto:

Input.Search = Behavior.create({
initialize: function() {
this.initialValue = $F(this.element)
},
onfocus: function(e) {
var value = $F(this.element)
if (value == this.initialValue) {
this.element.value = “”
this.element.style.color = “black”
}
},
onblur: function(e) {
var value = $F(this.element).strip()
if (value == “”) {
this.element.value = this.initialValue;
this.element.style.color = “”
}
}
})

…a proposito della funzione ready, anche questa dovrei sostituire,
come siamo messi con gli altri framework? Spero non si debba
utilizzare
la onload del body perchè mi ricordo di aver avuto problemi, tipo che
dovevo inventarmi giochetti per controllare l’avvenuto caricamento
delle
cose

Con l’ultima versione di prototype:

document.observe(“contentloaded”, function() { … })

e dovrebbe funzionare cross-browser nel 100% dei casi.

S.

On Mar 12, 2008, at 6:16 PM, Marco M. wrote:

Si certamente prototype permette di giocare con le classi, aggiungerle
rimuoverle ecc. ma con jquery facevo .show(‘slow’) ed avevo anche un
simpatico effetto di apparizione.

Tra parentesi, l’implementazione di show() in jQuery mi sembra
delirante… ci credo
che poi dicono che e’ lento :slight_smile:

S.

On Mar 13, 2008, at 12:58 PM, Marco M. wrote:

Stavo rileggendo il tuo intervento, ho notato che è la tendenza
attuale
fare quello che dici e devo dire che i framework js facilitano
notevolmente il compito, non è cosa da poco il poter separare il
principale codice js dall’html, le modifiche sono molto più semplici.
L’unica cosa riscontrata con jquery è la difficoltà nel gestire i link
generati da richieste ajax, non so se altri framework risolvono o è
proprio un limite del dom

Prova a fare un esempio concreto…

S.

Ne è venuta fuori una discussione molto interessante, grazie a tutti, se
non fosse estremamente OT vi chiederei il vostro ruolo nella
programmazione, se tutto fare come me o specializzati nel client side,
magari sarà l’argomento del prossimo thread.

Per quanto mi riguarda, evito accuratamente di appoggiarmi agli helper
per generare javascript
all’interno delle pagine. Piuttosto, genero un html assolutamente
“stupido”, poi aggiungo i comportamenti
dinamici con LowPro:

danwebb.net - Low Pro: Unobtrusive Scripting For Prototype

e mi appoggio agli helper solo per generare il codice delle risposte
AJAX.

S.

Stavo rileggendo il tuo intervento, ho notato che è la tendenza attuale
fare quello che dici e devo dire che i framework js facilitano
notevolmente il compito, non è cosa da poco il poter separare il
principale codice js dall’html, le modifiche sono molto più semplici.
L’unica cosa riscontrata con jquery è la difficoltà nel gestire i link
generati da richieste ajax, non so se altri framework risolvono o è
proprio un limite del dom

Stefano C. wrote:

Prova a fare un esempio concreto…

S.

Per esempio:
nel mio blog di prova ho un sistema tamarro che simula una attesa
asincrona, tipo il quadratino rosso con scritto “caricamento” di gmail
per intenderci. In pratica faccio questo

$(document).ready(function() {
$(“a.loading”).click(function(){
$("#loading").show(‘fast’);
});
});

al caricamento della pagina, i tag “a” aventi la classe loading devono
fare quella tamarrata. Se però quel tag “a” è stato creato dopo, per
esempio da una richiesta asincrona, non ha quell’evento click che ho
impostato io. Ho pensato che fosse associato solo una volta, al
caricamento della pagina però anche nel caso rifaccessi l’associazione
nella richiesta asincrona non cambia nulla, i nuovi tag continuano a non
avere quell’evento click. Mai capitato?

Mamma mia ho lanciato una bomba! :slight_smile: Non pensavo di scatenare una simile
sequela di post! Peccato che non considerate neanche di striscio
mootools… Comunque vabbé, mi fa piacere in ogni caso aver tirato su un
dialogo interessante :slight_smile:

Ciao a tutti!

Luca

On Mar 13, 2008, at 2:37 PM, Marco M. wrote:

al caricamento della pagina, i tag “a” aventi la classe loading devono
fare quella tamarrata. Se però quel tag “a” è stato creato dopo, per
esempio da una richiesta asincrona, non ha quell’evento click che ho
impostato io.

Con LowPro e’ molto semplice:

Event.addBehavior.reassignAfterAjax = true

in pratica si aggancia all’evento onComplete delle chiamate Ajax e
imposta
un timeout per ri-applicare i comportamenti dopo 10 secondi.

S.

On Thu, Mar 13, 2008 at 2:37 PM, Marco M. <
[email protected]> wrote:

al caricamento della pagina, i tag “a” aventi la classe loading devono
fare quella tamarrata. Se però quel tag “a” è stato creato dopo, per
esempio da una richiesta asincrona, non ha quell’evento click che ho
impostato io. Ho pensato che fosse associato solo una volta, al
caricamento della pagina però anche nel caso rifaccessi l’associazione
nella richiesta asincrona non cambia nulla, i nuovi tag continuano a non
avere quell’evento click. Mai capitato?

E’ vero, i nuovo link non vengono inizializzati perchè non presenti
all’inizio. Potresti creare una funzione che inizializza i link e
richiamarla sia al
caricamento della pagina che nella callback onComplete della chiamata
ajax.

se ti puo’ far piacere io sono pro mootools, e come tutti i “mad for
milk fan” rimaniamo sempre in ombra :stuck_out_tongue:

luca

poi penso che molto dipenda dal gusto personale, ormai i framework
js, come del resto anche gli altri framework di programmazione, si
inseguono nello sviluppo implementando più o meno bene tutti le
stesse
funzionalità.
un esempio di quello che dico è lightbox -> litebox ed i mille cloni
che ne sono nati :smiley:

Andrea F. wrote:

E’ vero, i nuovo link non vengono inizializzati perch� non presenti
all’inizio. Potresti creare una funzione che inizializza i link e
richiamarla sia al caricamento della pagina che nella callback onComplete della > chiamata ajax.

Mi sembra di aver provato però ora non ricordo bene, forse non rifacevo
l’associazione nella onComplete ma mettendo uno script nel nuovo html
ottenuto dalla richiesta ajax. Uhmmm …temo che il problema fosse
questo, in effetti non è una bella mossa, devo riprovare con la
oncomplete, grazie!

luca sabato wrote:

se ti puo’ far piacere io sono pro mootools, e come tutti i “mad for
milk fan” rimaniamo sempre in ombra :stuck_out_tongue:

Mootools purtroppo non lo conosco ma come hai detto anche tu, più o meno
si assomigliano tutti, proprio per questo secondo me, con rails è meglio
usare prototype, rimani nello standard. Immagina se ti trovi a dover
lavorare con altre persone ad un progetto rails ed ognuno vuole il suo
framework js. Io che ero un fan di jquery mi son dovuto ricredere ed
anche prototype ha i suoi pregi, continuo a preferire jquery ma di poco.
Però forse il discorso cambia se la persona in questione è molto esperta
ed il passaggio non è così indolore come il mio.
Poi c’è la questione plugin che forse è un pò più delicata anche se
ultimamente ho visto che alcuni sono multi framework