2013-03-13 16 views
6

So che ci sono un sacco di tutorial/informazioni sull'organizzazione di un'applicazione utilizzando Backbone.js. Sto creando gradualmente uno con l'aiuto di quei tutorial. Mi sembra di non capire il concetto di router. Bene, sono consapevole che i router sono il punto di partenza (e indica lo stato di un'app) ed è meglio evitare di mettere più logica lì.call route all'interno di una vista in Backbone

Ho un router. La mia app avrebbe dapprima caricato l'intestazione, il piè di pagina e la parte principale della pagina. Nella parte principale, innanzitutto, dovrei accedere all'utente. Per caricare la pagina di login, vorrei fare qualcosa di simile:

 var AppRouter = Backbone.Router.extend({ 
      initialize : function() { 
      var headerView = new HeaderView({el:$('#header')}); 
      headerView.render; 

      var footerView = new FooterView({el:$('#footer')}); 
      footerView.render; 

      var loginView = new LoginView({el:$('#login')}); 
      loginView.render; 
     }, 
     routes : { 
      "inbox" : "inbox", 
      "sentbox : "sentbox" 
     }, 
     inbox : function() { 
      // ... 
     }, 
     sentbox : function() { 
      // ... 
     } 
    }); 
    app = new AppRouter(); 
    Backbone.history.start(); 

Dopo l'accesso, la pagina di posta elettronica verrà caricata. MailView ha alcuni eventi da mostrare inbox, ad esempio sendbox.

 events: { 
     "click .inbox": "showInbox", 
     "click .sentbox": "showSentbox", 
     }, 
     showInbox : function() { 
      // app.route() or app.inbox() - ? 
     } 

A questo punto, voglio il router per mostrare ../#inbox e ../#sentbox rispettivamente. Mi chiedo se dovrei chiamare qui uno dei metodi del router per mostrarlo nella barra degli indirizzi. Perché sto confondendo è perché si dice che l'utilizzo di un router è migliore di più. Se lo faccio, il mio AppRouter sarà più complicato. Un altro problema è se gli utenti digitano l'indirizzo direttamente, dovrei caricare quella pagina. Penso che sia necessario inserire la logica all'interno dell'AppRouter .

Per favore dimmi il giusto approccio qui. Grazie in anticipo!

risposta

12

Partenza Router.navigate() (http://documentcloud.github.com/backbone/#Router-navigate)

Io di solito salvare una variabile di esempio la mia Router all'interno del mio oggetto App, ad es

var App = { 
    Views: {}, 
    Routers: {}, 
    Models: {}, 
    data: {} 

    initialize: function() { 
    this.data.mainRouter = new App.Routers.MainRouter(); 
    } 
}; 

dove App.MainRouter è definito come:

App.Routers.MainRouter = Backbone.Router.extend({ 

    routes: { 
    'route1' : 'route1handler', 
    'route2/:param' : 'route2handler' 
    }, 

    ... 
}); 

Poi nel mio punto di vista, se voglio passare a un nuovo percorso, che io chiamo:

App.data.mainRouter.navigate('route2/param1'); 
+7

Nota che puoi chiamare 'Backbone.history.navigate' anche se il tuo router non è accessibile dalla tua vista. – jgillich

+0

Buon punto: questa è probabilmente l'opzione migliore –

+3

Questo modifica l'hash dell'URL e non attiva il metodo del gestore della rotta – skaterdav85

7

Basta inviare il browser per la rotta desiderata tramite:

location.href = "#/the_route_you_want"; 

L'ascoltatore all'interno Backbone.history sarà catturare l'evento hashChange e la vista corretta verrà visualizzato.

Questo può essere fatto in un modo molto semplice tramite HTML:

<a href="#/the_route_you_want">The Route You Want</a> 

For further reading.

1

Se lo si desidera per chiamare anche la funzione route, impostare l'opzione di attivazione su true:

app.navigate("help/troubleshooting", {trigger: true}); 
Problemi correlati