Routing Backbone.js senza modificare l'URL

Question

Sto migrando un'applicazione Web a pagina singola basata su Backbone.js e jQuery a un'estensione di Chrome. Tuttavia, né la modalità pushState né quella basata su hashbang sembrano giocare bene con l'ambiente all'interno dell'estensione. Sono giunto alla conclusione che sto meglio solo visualizzando direttamente le visualizzazioni sulle interazioni dell'utente, ignorando del tutto il sistema window.location. Tuttavia, non sono sicuro di come implementarlo senza cambiare le chiamate a Router.navigate in dozzine di file.

Esiste un modo collegabile/modulare per mantenere il sistema di routing Backbone ma ignorare eventuali modifiche all'URL?

Answer 1

Io davvero si vuole attaccare con l'utilizzo di Router.navigate di beneficiare del instradamento il sistema che Backbone.js fornisce senza dover gestire i bug di hashbang quando viene utilizzato in un'estensione di Chrome (ad esempio percorsi sovrascritti di una barra), è possibile effettuare Router.navigate caricare l'URL direttamente, saltando l'intera ginnastica pushState.

questo è in realtà abbastanza facile da realizzare:

Router = Backbone.Router.extend({ 

    navigate: function (url) { 

    // Override pushstate and load url directly 
    Backbone.history.loadUrl(url); 

    }, 

    // Put routes here 
    routes: { } 

}); 

È quindi possibile chiamare Router.navigate(url) per caricare un nuovo percorso senza cambiare la storia, o anche legare l'azione per ogni link che contiene un attributo data-backbone (ad es <a href="login" data-backbone>Login</a>) con un evento simile al seguente:

$(function(){ 

    // Initialize router 
    Router = new Router; 
    Backbone.history.start(); 

    // Bind a[data-backbone] to router 
    $(document).on('click', 'a[data-backbone]', function(e){ 
    e.preventDefault(); 

    Router.navigate($(this).attr('href')); 
    }); 

}); 

Answer 2

È possibile ridefinire cosa fa Router.navigate, ma è meglio non utilizzare completamente il file. Penso che potrebbe creare confusione e il tuo codice sarà più pulito senza di esso se al momento stai attivando modifiche alla cronologia dalle viste.

Backbone.Marionette ha un concetto di controller, che funzionano molto come router senza una mappa URL (con Marionette, l'idea è di mantenere le definizioni del percorso minime e chiamare invece i controller per il comportamento). Inoltre, non è necessario utilizzare nessuno dei componenti di Marionette che non si desidera.

Se si voleva davvero a bastone con il router come è, si potrebbe probabilmente solo ridefinire Backbone.History.navigate a (nota, non testato)

navigate: function(fragment, options) { 
    if (!History.started) return false; 
    if (!options || options === true) options = {trigger: options}; 
    fragment = this.getFragment(fragment || ''); 
    if (this.fragment === fragment) return; 
    this.fragment = fragment;  
    if (options.trigger) this.loadUrl(fragment); 
}