Come utilizzare correttamente Sencha NavigationView, deep linking e cronologia del browser correttamente

Question

Uso un NavigationView come pannello principale. E la cosa che cerco di realizzare è di spingere le viste sul mio pannello radice mentre l'utente naviga più a fondo nella mia applicazione e le visualizza quando l'utente torna indietro.

Ecco un semplice esempio che mostra il mio problema: ho un tipo di visualizzazione che mostra alcuni dettagli di ingresso.

Ext.define('MyApp.view.EntryDetails', { 
    extend: 'Ext.Panel', 
    xtype: 'entrydetails', 

    config: { 
     tpl: '<div>{id}</div>' 
    } 
}); 

Ho anche un controllore configurato per ascoltare il seguente itinerario: "entry /: id", e spingere un nuovo entrydetails vista sul navigationstack (NavigationView) quando questa rotta partite.

Ext.define('MyApp.controller.EntryDetails', { 
    extend: 'Ext.app.Controller', 
    config: { 
     routes: { 
      'entry/:id': 'showEntry' 
     }, 
     refs: { 
      navview: 'mynavigationview' 
     }, 
    }, 

    showEntry: function(id){ 
     this.getMain().push({ 
      xtype: 'entrydetails', 
      data: {id:id} 
     }); 
    } 
}); 

OK, funziona bene. Ora, per prima cosa supponiamo di navigare verso: index.html # entry/1. Questo spingerà una nuova vista sullo stack, proprio come voglio. Quindi faccio clic su un altro link index.html # entry/2. Un'altra vista è spinta in pila, questo è anche il comportamento previsto. Ora il problema appare quando faccio clic sul pulsante indietro BROWSERS. Cambia l'url in index.html # entry/1 e spinge l'ennesima vista sul mio stack. Volevo far apparire una vista invece di aggiungerne un'altra. Se premo la barra degli strumenti, il pulsante di backbutton viene spuntato come volevo, ma questo non è il caso del pulsante Indietro del browser.

Capisco perché questo sta accadendo: Il framework Sencha touch non sa se il cambio dell'URL è dovuto al fatto che ho premuto un altro link con lo stesso url del precedente url della cronologia del browser, o se stavo premendo il pulsante Indietro su il mio browser E tutto ciò che il mio codice sa è che dovrebbe spingere un'altra vista sullo stack quando vede un url cambiare in "entry /: id".

Qual è il modo migliore per risolvere questo problema. Come posso rilevare che il pulsante Indietro del browser è stato premuto e il pop una vista dalla mia navigationview.

Ho pensato di verificare se l'url modificato fosse simile a una vista più in basso sul mio stack di navigazione, ma non sono sicuro che sia il modo per farlo.

Qualsiasi aiuto/discussione sull'argomento è apprezzato!

Answer 1

Ho riscontrato un problema simile con il componente NestedList. Quello che ho finito è stato sovrascrivere il onBackTap, cancellarlo e poi reindirizzare all'URL appropriato. Immagino che ci sia un modo per applicare questa tecnica anche al NavigationView. Non so se questo sia effettivamente il modo giusto per farlo, ma era l'unico modo per ottenere i pulsanti di back-up dell'hardware e del software per giocare bene insieme.

Answer 2

È possibile aggiungere queste linee alla visualizzazione navigazione definiton,

initialize: function() { 
    this.getNavigationBar().on({ 
     back: this.onBackButtonTap, 
     scope: this 
    }); 
}, 
onBackButtonTap: function() { 
    this.pop(); 
    this.fireEvent('back', this); 
    history.back(); 
}