Inhaltsverzeichnis
Nachdem wir definiert haben, was die Router in unserer App Backbone.js, müssen wir auf Änderungen in der URL achten. Dies ist beispielsweise der Fall, wenn unser Benutzer einen Wert mit seinem jeweiligen Hash platziert. aplicacion.com/#ruta Damit kann der Benutzer nicht nur das Hören aktivieren, sondern auch die Anwendung mit einem Lesezeichen versehen.Backbone.Geschichte
Wie wir bereits erklärt haben, ist dies das Element, das unsere Anwendung zum Start macht Hören Sie auf Änderungen in der URL und nehmen Sie die Hashes auf, das Wichtigste dabei ist, dass es uns auch hilft, eine Anwendung zu erstellen, die Abschnitte enthalten kann, die als gespeichert werden Marker oder Lesezeichen durch den Benutzer, wodurch Abschnitte erstellt werden, auf die direkt zugegriffen werden kann, ohne viele Probleme durchlaufen zu müssen.
Wie benutzt man?Um die zu verwenden Backbone.Geschichte wir müssen es tun, sobald wir das Objekt definieren, das unsere initialisiert Router und dafür machen wir es durch .start()-Methode.
Sehen wir uns im folgenden Code an, wie diese Aktion aussehen würde:
var myRouter = new exampleRouter (); Backbone.history.start();
In diesem Fall haben wir a Router namens BeispielRouter die der Variablen miRouter zugewiesen wird, wie wir nach Abschluss dieser Aktion angegeben haben, verwenden wir die .start()-Methode wie wir in der letzten Zeile des Beispiels sehen.
Wenn wir Folgendes ausführen Router In unserem Webserver können wir sehen, wie das, was wir erklärt haben, für uns funktioniert:
var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p:page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Wir haben auf den Routertest zugegriffen");}, searchQuestion: function (query, page) {var page_no = page || 1; console.log ("The page no:" + page_no + " aus der Suche, die das Wort enthält:" + query);}, defaultRoute: function (other) {console.log ('Die Ressource:' + other + 'Existiert nicht');}}); var myRouter = new exampleRouter (); Backbone.history.start(); Sehen wir uns im folgenden Bild an, wie es aussieht, wenn wir auf den Suchpfad zugreifen und ihm die gewünschten Parameter übergeben:
Diese.Navigate-Methode
Diese Methode ermöglicht es uns Aktualisieren Sie die Anwendungs-URL von einer Methode, dies hilft uns zu vermeiden, die Seite neu laden zu müssen und somit den Zweck einer Einzelseitenanwendung nicht zu verlieren. Das Detail ist, dass diese Methode nicht durch den Router geht, also müssen wir dies explizit tun, sehen wir uns die Beispiele an:
1- Ohne durch die zu gehen Router:
viewTask: function (id) {console.log ("Zeigen Sie die angeforderte Aufgabe an."); this.navigate ("Aufgabe /" + id + '/edit'); // aktualisiere die URL, aber sie geht nicht über den Router}, 2- Mit der Korrektur, die es durch die Router:
viewTask: function (id) {console.log ("Zeigen Sie die angeforderte Aufgabe an."); this.navigate ("Aufgabe /" + id + '/edit', {trigger: true}); // aktualisiere die URL, aber sie geht nicht über den Router}, Damit erreichen wir das Ziel bereits aus der Anwendung heraus URL ändern und auf einmal direkt durch den Router gehen.
Am Ende dieses Tutorials haben wir gesehen, wie nützlich es ist, über benutzerfreundliche URLs auf unsere Anwendung zugreifen zu können, da dies uns hilft, sie für Suchmaschinen und Benutzer besser lesbar zu machen und so die SEO.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
