Aggiunto liquido antincendio a Ember CLI, {{liquido-outlet}} non fa nulla

Question

Recentemente ho aggiunto liquido fuoco al mio progetto 0.2.3 Ember CLI seguendo questo schema i passaggi in questo tutorial: http://www.programwitherik.com/doing-animations-and-transitions-with-liquid-fire-and-ember/

ho aggiunto Liquid Spara con npm install --save-dev liquid-fire. Ho aggiunto un file transitions.js con il codice descritto nel tutorial. Ho sostituito {{outlet}} con {{liquid-outlet}}. E niente. Non sta succedendo niente Nessun errore nei registri o nella console e nulla viene visualizzato dove si trova la presa. Ho provato esattamente quello che dice il tutorial. Mi manca un passaggio per far funzionare {{liquid-outlet}}?

Answer 1

È possibile eseguire il debug delle transizioni inserendo this.debug() come argomento finale nelle transizioni che si ritiene debbano corrispondere. Per ogni presa, questo stamperà sulla console perché ogni regola di transizione non corrisponde.

Vedi qui: http://ef4.github.io/liquid-fire/#/transition-map/debugging-constraints

Answer 2

Ho avuto lo stesso problema. Il mio problema era che non stavo usando i nomi dei percorsi corretti.

Ho abilitato l'opzione ENV.APP.LOG_TRANSITIONS = true; in /config/environment.js. Questo stampa i nomi dei percorsi nella tua console durante la transizione, il che mi ha aiutato a scrivere le transizioni corrette in /app/transitions.js. Assicurati inoltre di aggiungere {{liquid-outlet}} a TUTTI i tuoi punti vendita durante l'annidamento dei percorsi.

Heres mia transitions.js di file:

export default function(){ 
    this.transition(
     this.fromRoute('dashboard'), 
     this.toRoute('bots'), 
     this.use('toLeft'), 
     this.reverse('toRight') 
    ); 

    this.transition(
     this.fromRoute('bots.bot'), 
     this.toRoute('bots.create'), 
     this.use('toLeft'), 
     this.reverse('toRight') 
    ); 

    this.transition(
     this.fromRoute('bots.bot'), 
     this.toRoute('bots.index'), 
     this.use('toRight'), 
     this.reverse('toLeft') 
    ); 

    this.transition(
     this.fromRoute('bots.bot.index'), 
     this.toRoute('bots.bot.edit'), 
     this.use('toLeft'), 
     this.reverse('toRight') 
    ); 

    this.transition(
     this.fromRoute('bots.bot'), 
     this.toRoute('bots.bot.edit'), 
     this.use('toDown'), 
     this.reverse('toUp') 
    ); 
} 

Answer 3

Ho avuto lo stesso problema.

Ho semplicemente perso lo transitions.js in / anziché all'interno di /app/. Ora tutto funziona!

cose che potete provare:

• Aggiungere un'animazione esplicito alla presa {{liquid-outlet use="toLeft"}}. Se funziona, probabilmente è il tuo file app/transition.js.
• Aggiungi this.debug() a app/transition.js e vedere se registra correttamente. Se sì, allora i tuoi percorsi coincidono? See example
• Assicurarsi di avvolgere l'intero file transitions.js in export default function() { ... };

Utilizzando Ember CLI 1.13.13: