Le routeur de l'épine dorsale agit comme une fonction de routage, contrôlant la direction de l'URL et prend effet lors de l'utilisation de la balise # dans l'URL.
La définition d'un routeur nécessite au moins un routeur et une fonction pour cartographier une URL spécifique, et nous devons nous rappeler que dans la colonne vertébrale, tout caractère après la balise # sera reçu et interprété par le routeur.
Définissons un routeur:
<Script> var Approuter = Backbone.Router.Extend ({Routes: {"* Actions": "DefaulTRoute" // correspond http://example.com/#anything-here}}); // Routeur instancié var app_router = nouvel évaluateur; app_router.on ('Route: DefaulTroute', fonction (actions) {alert (actions);}) // Ouvrir History Backbone.History.Start (); </cript>Maintenant, nous avons défini un routeur, mais pour le moment, le routeur ne correspond pas à l'URL spécifique. Ensuite, nous commencerons à expliquer en détail le fonctionnement du routeur.
Routage dynamique
La squelette vous permet de définir un routeur avec des paramètres spécifiques. Par exemple, vous voudrez peut-être recevoir un message via un ID spécifique, comme une URL: "http://example.com/#/posts/12". Une fois ce routeur activé, vous pouvez obtenir un message avec un ID de 12. Ensuite, définissons ce routeur:
<Script> var Approuter = Backbone.Router.Extend ({Routes: {"Posts /: ID": "GetPost", "* Actions": "DefaulTRoute" // Backbone correspondra aux routes selon l'ordre}}); // Routeur instancié var app_router = nouvel évaluateur; app_router.on ('route: getPost', fonction (id) {// notez que les paramètres sont passés ici alert ("obtenir le numéro de post" + id);}); app_router.on ('itinéraire: defaultroute', fonction (actions) {alert (actions);}); // Open History Backbone.History.Start (); </cript>Règles de correspondance
Backbone utilise deux formes de variables pour définir les règles de correspondance pour le routeur. Le premier est:, qui peut correspondre à tous les paramètres entre les barres obliques dans l'URL, et l'autre est *, qui est utilisée pour correspondre à toutes les pièces derrière les objets. Notez que puisque la deuxième forme a une plus grande ambiguïté que la première, elle a la priorité de correspondance la plus faible.
Le résultat de toute forme de correspondance est transmis dans la fonction pertinente en tant que paramètre. La première règle peut renvoyer un ou plusieurs paramètres, et la deuxième règle renvoie le résultat de la correspondance entier en tant que paramètre.
Ensuite, utilisons des exemples pour illustrer:
Routes: {"Posts /: id": "getPost", // <a href = "http://example.com/#/posts/121"> Exemple </a> "Download / * path": "downloadfile", // <a href = "http://example.com/#/download/user/images/hey.gif"> téléchargement </a> ": Route /: Action/User/images/hey.gif" "LoadView", // <a href = "http://example.com/#/dashboard/graph"> charger la route / vue d'action </a>}, app_router.on ('Route: getPost', fonction (id) {alert (id); // après match, le paramètre passé est 12}); app_router.on ('route: téléchargement', path); alerte (chemin); // Après la correspondance, le résultat de correspondance entier est renvoyé en tant que paramètre, le chemin est utilisateur / images / hey.gif}); app_router.on ('Route: LoadView', fonction (route, action) {alerte (route + "_" + action); // après correspondance, deux paramètres sont passés, le tableau de bord_graphe va apparaître});Vous pouvez souvent entendre le mot «routeur», mais il fait souvent référence à un périphérique réseau qui est une navigation et un centre pour les connexions réseau, la transmission de données. La fonction "routeur" dans l'épine dorsale est similaire à lui. Comme vous pouvez le voir dans l'exemple ci-dessus, il peut naviguer dans différentes ancres d'URL vers la méthode d'action correspondante.
(Ce mécanisme est également fourni dans de nombreux frameworks Web côté serveur, mais Backbone.Router se concentre davantage sur la navigation des applications frontales à une seule page.)
La navigation de routage de l'épine dorsale est effectuée par deux classes Backbone.Router et Backbone.History:
Nous n'instantialisons généralement pas directement un historique, car lorsque nous créons une instance de routeur pour la première fois, nous créerons automatiquement un objet singleton de l'histoire, auquel vous pouvez accéder via Backbone.History.
Pour utiliser la fonction de routage, nous devons d'abord définir une classe de routeur pour déclarer les règles et les actions de l'URL qui doivent être écoutées. Dans l'exemple tout à l'heure, nous définissons la liste URL à écouter via l'attribut Routes lors de la définition, où la clé représente les règles et la valeur de l'URL représentent la méthode d'action exécutée lorsque l'URL est dans cette règle.
Règles de hachage
Les règles d'URL représentent le fragment de hachage (point d'ancrage) dans l'URL actuelle. En plus de pouvoir spécifier des chaînes générales dans les règles, nous devons également faire attention à deux règles dynamiques spéciales:
Une chaîne séparée par / (slash) dans la règle sera convertie en expression ([^ //] +) dans la classe du routeur, représentant plusieurs caractères commençant par / (slash). Si: (Colon) est défini dans cette règle, cela signifie que cette chaîne dans l'URL sera transmise à l'action en tant que paramètre.
Par exemple, nous définissons le sujet de la règle /: id. Lorsque le point d'ancrage est # topic / 1023, 1023 sera transmis à l'action en tant qu'ID de paramètre. Le nom du paramètre (: id) dans la règle sera généralement le même que le nom formel du paramètre de la méthode d'action. Bien que le routeur n'ait pas de telles restrictions, il est plus facile de comprendre en utilisant le même nom de paramètre.
* (astérisque) dans la règle est converti en expression (. *?) À l'intérieur du routeur, représentant zéro ou plus de caractères arbitraires. Comparé à la règle: (colon), * (astérisque) n'a pas de limitation de séparation / slash), tout comme la * règle d'erreur que nous avons définie dans l'exemple ci-dessus.
La règle * (astérisque) dans le routeur utilise un motif non frisé après avoir été converti en une expression régulière, afin que vous puissiez utiliser une règle de combinaison comme celle-ci: * type /: id, qui peut correspondre à # hot / 1023, et passera Hot et 1023 comme paramètres à la méthode d'action.
Ce qui précède introduit comment les règles sont définies. Ces règles correspondront à un nom de méthode d'action, qui doit être dans un objet de routeur.
Après avoir défini la classe du routeur, nous devons instancier un objet de routeur et appeler la méthode start () de l'objet Backbone.History, qui commencera à écouter l'URL. À l'intérieur de l'objet History, l'événement OnHashChange sera utilisé pour écouter les changements dans l'URL du hachage (point d'ancrage). Pour les navigateurs qui ne soutiennent pas l'événement OnHashchange (tel que IE6), l'histoire écoutera le battement de cœur SetInterval.
Règles Pushstate
Backbone.History prend également en charge les URL Pushstate. Pushstate est une nouvelle fonctionnalité fournie par HTML5. Il peut faire fonctionner l'URL du navigateur actuel (plutôt que de simplement modifier le point d'ancrage) et ne provoquera pas de rafraîchissement de la page, ce qui rend une seule application de page plus comme un processus complet.
Pour utiliser la fonctionnalité PushState, vous devez d'abord comprendre certaines des méthodes et événements fournis par HTML5 pour cette fonctionnalité (ces méthodes sont définies dans l'objet Window.History):
1.PushState (): Cette méthode peut ajouter une nouvelle entité historique à l'historique du navigateur à l'URL spécifiée.
2.ReplaceState (): Cette méthode peut remplacer l'entité historique actuelle par l'URL spécifiée
Appeler les méthodes PushState () et remplacer () est simplement de remplacer l'URL de la page actuelle, et il n'ira pas vraiment à cette adresse URL (lors de l'utilisation du bouton arrière ou avant, il ne sautera pas à l'URL). Nous pouvons écouter les changements d'URL causés par ces deux méthodes via l'événement OnPopState.
Méthodes liées au routage
1.Route () Méthode
Après avoir réglé les règles de routage, si un ajustement dynamique est requis, vous pouvez appeler la méthode Router.Route () pour ajouter dynamiquement des règles de routage et des méthodes d'action, par exemple:
Router.Route ('Topic /: Pageno /: PageSize', 'Page', Function (Pageno, PageSize) {// TODO}); Lorsque nous appelons la méthode Route (), la règle donnée peut être non seulement une chaîne, mais aussi une expression régulière: router.Route (/ ^ topic /(.*?)/(.*?)$//, 'page', function (pageno, pagesize) {// todo});2.Navigate () Méthode
Dans l'exemple précédent, les règles d'URL sont déclenchées par notre entrée manuelle. Dans les applications réelles, il peut parfois être nécessaire de sauter et de naviguer manuellement, et vous pouvez l'appeler
Router.Navigate () est utilisé pour le contrôle, par exemple: router.navigate ('topic / 1000', {Trigger: true});Ce code modifie l'URL en http: //localhost/index.html#topic/1000 et déclenche la méthode Renderdetail. Il convient de noter que nous passons dans la configuration du déclencheur dans le deuxième paramètre, qui est utilisé pour indiquer si la méthode d'action correspondante est déclenchée lors de la modification de l'URL.
3.Stop () Méthode
N'oubliez pas que nous avons commencé à acheminer l'écoute à travers la méthode d'écran .history.start (). Vous pouvez également appeler la méthode Backbone.History.stop () à tout moment pour arrêter d'écouter, par exemple:
router.Route ('topic /: pageno /: pagesize', 'page', function (pageno, pagesize) {backbone.history.stop ();});Exécutez ce code et accédez à l'URL: http: //localhost/index.html#topic/5/20. Vous constaterez qu'après l'exécution de cette action, l'écoute ne prendra plus effet.