Router im Rückgrat fungiert als Routing -Funktion, die die Richtung der URL steuert und bei der Verwendung des # -Tags in der URL wirksam wird.
Das Definieren eines Routers erfordert mindestens einen Router und eine Funktion, um eine bestimmte URL zuzuordnen, und wir müssen uns daran erinnern, dass im Rückgrat ein Zeichen, das vom Router empfangen und interpretiert wird.
Definieren wir einen Router:
<Script> var ordnungsgemäß = backbone.router.extend ({Routes: {"*actions": "defaUltroute" // übereinstimmen http://example.com/#anything-here}}); // Router var app_router = neuer Zustimmung instanziieren; app_router.on ('Route: Defaultroute', Funktion (Aktionen) {alert (Aktionen);}) // Backbone von Backbone öffnen.Jetzt haben wir einen Router definiert, aber zu diesem Zeitpunkt stimmt der Router nicht mit der spezifischen URL überein. Als nächstes werden wir ausführlich erklären, wie Router funktioniert.
Dynamisches Routing
Mit Backbone können Sie einen Router mit spezifischen Parametern definieren. Sie möchten beispielsweise einen Beitrag über eine bestimmte ID erhalten, z. B. eine URL: "http://example.com/#/posts/12". Sobald dieser Router aktiviert ist, können Sie einen Beitrag mit einer ID von 12 erhalten. Als nächstes definieren wir diesen Router:
<Script> var appouter = backbone.router.extend ({Routes: {"posts/: id": "getPost", "*actions": "Defaultroute" // Backbone stimmt den Routen nach der Reihenfolge überein}}); // Router var app_router = neuer Zustimmung instanziieren; app_router.on ('Route: getPost', Funktion (id) {// Beachten Sie, dass die Parameter hier übergeben werden ("postnummer" + id);}); app_router.on ('Route: Defaultroute', Funktion (Aktionen) {alert (Aktionen);}); // Backbone Backbone.history.start (); </script> öffnen. </Script>Übereinstimmende Regeln
Backbone verwendet zwei Variablenformen, um die Übereinstimmungsregeln für Router festzulegen. Das erste ist:, das alle Parameter zwischen Schrägstrichen in der URL und der andere *übereinstimmen kann, das verwendet wird, um alle Teile hinter den Schrägstrichen abzustimmen. Beachten Sie, dass die zweite Form eine größere Unklarheit als die erste hat, die die niedrigste passende Priorität hat.
Das Ergebnis einer Übereinstimmung wird in die relevante Funktion als Parameter übergeben. Die erste Regel kann einen oder mehrere Parameter zurückgeben, und die zweite Regel gibt das gesamte Match -Ergebnis als Parameter zurück.
Lassen Sie uns als nächstes Beispiele verwenden, um zu veranschaulichen:
Routen: {"Beiträge/: id": "getPost", // <a href = "http://example.com/#/posts/121"> Beispiel </a> "download/*path": "downloadFile", // <a href = "http:/axample.com/#/ddownlader: "LoadView", // <a href = "http://example.com/#/dashboard/graph"> Load Route/Action Ansicht </a>}, app_router.on ('Route: getPost', function (id) {alert (id); // After Matching, der übergebene Parameter ist 12}) (app_router.on) (app_router.on) (app_router) (app_router.on): ALERT (Pfad);Möglicherweise hören Sie oft das Wort "Router", aber es bezieht sich häufig auf ein Netzwerkgerät, das eine Navigation und einen Hub für Netzwerkverbindungen und Datenübertragung ist. Die "Router" -Funktion im Rückgrat ähnelt ihm. Wie Sie aus dem obigen Beispiel sehen können, können verschiedene URL -Anker zur entsprechenden Aktionsmethode navigieren.
(Dieser Mechanismus wird auch in vielen serverseitigen Webrahmen bereitgestellt, aber Backbone.router konzentriert sich mehr auf die Navigation von Front-End-Einzel-Seiten-Anwendungen.)
Die Routing -Navigation von Backbone erfolgt durch zwei Klassen Backbone.router und Backbone.history:
Wir instanziieren im Allgemeinen keine Geschichte direkt, denn wenn wir zum ersten Mal eine Routerinstanz erstellen, erstellen wir automatisch ein Singleton -Objekt der Geschichte, auf das Sie über Backbone.History zugreifen können.
Um die Routing -Funktion zu verwenden, müssen wir zunächst eine Router -Klasse definieren, um die URL -Regeln und -aktionen zu deklarieren, die angehört werden müssen. In dem Beispiel jetzt definieren wir die URL -Liste, die beim Definieren durch das Attribut von Routen angehört werden soll, wobei der Schlüssel die URL -Regeln und den Wert der Aktionsmethode darstellt, die ausgeführt wird, wenn sich die URL in dieser Regel befindet.
Hash -Regeln
URL -Regeln repräsentieren das Hash -Fragment (Ankerpunkt) in der aktuellen URL. Neben der Möglichkeit, allgemeine Zeichenfolgen in den Regeln anzugeben, müssen wir auch auf zwei besondere dynamische Regeln achten:
Eine Zeichenfolge, die durch / (Slash) in der Regel getrennt ist, wird in der Router -Klasse in einen Ausdruck ([^//]+) konvertiert, der mehrere Zeichen darstellt, die mit / (Slash) beginnen. Wenn: (Colon) in dieser Regel festgelegt ist, bedeutet dies, dass diese Zeichenfolge in der URL als Parameter zur Aktion übergeben wird.
Zum Beispiel setzen wir das Regelthema/: ID. Wenn der Ankerpunkt #Thema/1023 ist, wird 1023 als Parameter -ID an die Aktion übergeben. Der Parametername (: ID) in der Regel entspricht im Allgemeinen dem formalen Parameternamen der Aktionsmethode. Obwohl Router keine solchen Einschränkungen aufweist, ist es einfacher, denselben Parameternamen zu verstehen.
* (Sternchen) in der Regel wird im Router in einen Ausdruck (.*?) Umgewandelt, der null oder mehr willkürliche Zeichen darstellt. Im Vergleich zur: (Dickdarm) -Regel hat * (Sternchen) keine / (Schrägstrich-) Trennungsbeschränkung, genau wie die * Fehlerregel, die wir im obigen Beispiel definiert haben.
Die * (Sternchen) -Regel in Router verwendet ein Nicht-Greedy-Muster, nachdem Sie in einen regulären Ausdruck konvertiert wurden, sodass Sie eine Kombinationsregel wie folgt verwenden können: * Typ/: ID, die mit #hOT/1023 übereinstimmen kann und heiß und 1023 als Parameter über die Aktionsmethode übergeht.
In den obigen Eingriffen wird festgelegt, wie Regeln definiert werden. Diese Regeln entsprechen einem Aktionsmethodennamen, der sich in einem Router -Objekt befinden muss.
Nachdem wir die Router -Klasse definiert haben, müssen wir ein Router -Objekt instanziieren und die Start () -Methode des Backbone.History -Objekts aufrufen, das die URL anhört. Innerhalb des Verlaufsobjekts wird das ONHASHChange -Ereignis verwendet, um Änderungen in der URL am Hash (Anchor Point) zuzuhören. Für Browser, die das ONHASHChange -Ereignis (wie IE6) nicht unterstützen, wird die Geschichte auf den SetInterval -Herzschlag hören.
Pushstate -Regeln
Backbone.history unterstützt auch Pushstate -URLs. PushState ist eine neue Funktion von HTML5. Es kann die URL des aktuellen Browsers bedienen (anstatt nur den Ankerpunkt zu ändern), und führt nicht zu einer Aktualisierung der Seiten, wodurch eine einzelne Seitenanwendung eher wie ein vollständiger Vorgang wird.
Um die Funktion "PushState" zu verwenden, müssen Sie zunächst einige der von HTML5 für diese Funktion bereitgestellten Methoden und Ereignisse verstehen (diese Methoden sind im Fenster definiert. History -Objekt):
1.PushState (): Diese Methode kann der angegebenen URL dem Browser -Verlauf eine neue Historie hinzufügen.
2.Replacestate (): Diese Methode kann die aktuelle Einheit des Verlaufs durch die angegebene URL ersetzen
Aufrufen von methoden von pushstate () und ersetzen () () ersetzen Sie nur die URL der aktuellen Seite, und es wird nicht wirklich zu dieser URL -Adresse geleitet (wenn die Back- oder Vorwärts -Taste verwendet wird, wird nicht zur URL gesprungen). Wir können die URL -Änderungen anhören, die durch diese beiden Methoden durch das OnPopstate -Ereignis verursacht werden.
Routing verwandte Methoden
1.Route () Methode
Nachdem Sie die Routing -Regeln festgelegt haben, können Sie beispielsweise die Methode Router.Route () aufrufen, um Routing -Regeln und Aktionsmethoden hinzuzufügen, z.
Router.Route ('Thema/: pageno/: pageSize', 'page', function (pageno, pageSize) {// Todo}); Wenn wir die Route () -Methode aufrufen, kann die angegebene Regel nicht nur eine Zeichenfolge, sondern auch ein regulärer Ausdruck sein: Router.route (/^topic /(.*?)/(.*?), 'Seite', Funktion (pageno, pageSize) {// Todo});2.Methode navigate ()
Im vorherigen Beispiel werden URL -Regeln durch unsere manuelle Eingabe ausgelöst. In den tatsächlichen Anwendungen kann es manchmal notwendig sein, manuell zu springen und navigieren zu können, und Sie können es nennen
Router.navigate () Methode wird zur Kontrolle verwendet, z.
Dieser Code ändert die URL in http: //localhost/index.html#topic/1000 und löst die RenderDetail -Methode aus. Es ist zu beachten, dass wir die Triggerkonfiguration im zweiten Parameter übergeben, um anzuzeigen, ob die entsprechende Aktionsmethode beim Ändern der URL ausgelöst wird.
3.Stop () Methode
Denken Sie daran, wir haben angefangen, das Hören durch das Backbone.history.start () -Methode zu leiten. Sie können auch Backbone.history.Stop () -Methode jederzeit aufrufen, um nicht mehr zuzuhören, zum Beispiel:
Router.Route ('Thema/: pageno/: pageSize', 'page', function (pageno, pageSize) {backbone.history.stop ();});Führen Sie diesen Code aus und greifen Sie auf die URL zu: http: //localhost/index.html#topic/5/20. Sie werden feststellen, dass das Zuhören nach dieser Aktion nicht mehr wirksam wird.