2012-12-20 8 views
16

voglio assegnare una classe CSS a una parte di HTML in base alla condizione in slim-langsottile-lang di if-else codice nidificato

sto facendo il seguente

- if current_user 
    .title 
- else 
    .title_else 

Ora come posso scrivi l'HTML che dovrebbe essere annidato in uno della classe sopra? Devo scrivere HTML sia nella condizione if sia nella condizione else?

Il motivo è che l'HTML che deve essere annidato in una delle classi precedenti deve essere ulteriormente destinato a destra. Ma se lo intendo più a fondo, è incluso in altre condizioni. Come posso avvicinarmi ora?

risposta

28

Ecco un uno di linea:

.thing class=(current_user ? 'large-menu' : 'medium-menu') 
    h4 Same content, different class 
+3

Molto bello. L'interpolazione non è necessaria. '.thing class = (true? 'large-menu': 'menu medio')' – obfk

2

1) Sì, è necessario scrivere HTML in entrambi i div creati poiché si desidera che sia diverso. Se non volessi che fosse diverso non ci sarebbe bisogno di una dichiarazione if!

2) non ho davvero capito il punto, ma questo codice funzionato perfettamente bene con me:

- if true 
    .title 
    h4 True is true! 
- else 
    .title_else 
    h4 True is not true! 

Questo codice mostrato una div con una classe di .title e un h4 con il testo True is true! al suo interno .

MODIFICA: Okay, ora capisco cosa intendi! È NON possibile fare qualcosa di simile perché non renderà l'h4!

- if true 
    .title 
- else 
    .title_else 

    h4 Same content, different class 

ti consiglierei di scrivere un aiutante, che permette di rendere parziali e poi solo il rendering che parziale da dentro entrambe le condizioni. Questo significa che devi solo scriverne uno parziale e chiamarlo due volte.

- if true 
    .title 
    = render 'footer' 
- else 
    .title_else 
    = render 'footer' 
+0

mia domanda ho lo stesso blocco di codice per entrambi se blocco e altro blocco. Voglio solo applicare una classe diversa in base alla condizione. C'è un modo migliore per evitare la ripetizione del codice? – nik7

15

Dal momento che si sta solo commutazione tra due attributi, Tiago Franco's answer è certamente sufficiente per i vostri scopi. Tuttavia, c'è un altro modo che è utile.

È possibile utilizzare capture per eseguire il rendering HTML su una variabile locale e quindi incorporare tale contenuto all'interno della struttura di controllo desiderata. Quindi, se il contenuto involucro era un po 'più complessa, faresti questo:

- shared_content = capture do 
    div This is displayed regardless of the wrapper 
- if current_user 
    | You're logged in! 
    .title 
    = shared_content 
- else 
    | You're not logged in! 
    .title_else 
    = shared_content 

userò spesso questo per avvolgere il contenuto in un link, se c'è un URL disponibili:

- image = capture do 
    img src=image_url 
- if url.blank? 
    = image 
- else 
    a href=url = image