2013-03-13 12 views
6

Ich weiß, es gibt viele Tutorials/Informationen über die Organisation einer Anwendung mit Backbone.js da draußen. Ich erschaffe allmählich eine mit Hilfe dieser Tutorials. Ich scheine das Verständnis von Routern nicht zu verstehen. Nun, ich bin mir bewusst, dass Router Ausgangspunkt sind (und den Zustand einer App angibt) und es ist besser zu vermeiden, mehr Logik dort zu setzen.Anruf Route innerhalb einer Ansicht in Backbone

Ich habe einen Router. Meine App lädt zuerst Kopfzeile, Fußzeile und Hauptteil der Seite. Im Hauptteil sollte ich zuerst den Benutzer anmelden. Um die Login-Seite zu laden, würde ich so etwas tun:

 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(); 

Nach der erfolgreichen Anmeldung wird die Mail-Seite geladen werden. MailView hat einige Ereignisse zum Anzeigen von Posteingang, zum Beispiel sendbox.

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

An dieser Stelle möchte ich den Router ../#inbox und ../#sentbox jeweils zeigen. Ich frage mich, ob ich hier eine der Methoden des Routers anrufen sollte, um das in der Adressleiste zu zeigen. Warum ich verwirrt bin, ist, weil gesagt wird, dass die Verwendung eines Routers besser ist als mehr. Wenn ich das tue, wird meine AppRouter komplizierter. Ein anderes Problem ist, wenn Benutzer die Adresse direkt eingeben, sollte ich diese Seite laden. Ich denke, es erfordert, um die Logik in den AppRouter zu setzen.

Bitte sagen Sie mir den richtigen Ansatz hier. Danke im Voraus!

Antwort

12

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

ich normalerweise eine Instanz Variable meiner speichern Router in meinem App-Objekt, z

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

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

wo App.MainRouter wie folgt definiert ist:

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

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

    ... 
}); 

innerhalb meiner Ansicht nach dann, wenn ich auf einer neuen Route navigieren möchten, rufe ich:

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

Beachten Sie, dass Sie auch 'Backbone.history.navigate' aufrufen können, wenn Ihr Router aus Ihrer Sicht nicht erreichbar ist. – jgillich

+0

Guter Punkt - das ist wahrscheinlich eine bessere Option –

+3

Dies ändert nur den URL-Hash und feuert nicht die Handler-Methode der Route – skaterdav85

7

Sie einfach den Browser an die entsprechende Route über senden: wird angezeigt

location.href = "#/the_route_you_want"; 

Der Zuhörer innerhalb Backbone.history wird fangen die hashChange Ereignis und die richtige Ansicht

.

Dies kann auf sehr einfache Art und Weise über HTML erfolgen:

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

For further reading.

1

Wenn Sie es wünschen Um auch die Routenfunktion aufzurufen, setzen Sie die Triggeroption auf "True":

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