El enrutador de rutas Backbone.js se utiliza para mapear URL con los parámetros de la función del enrutador. Se utiliza para enrutar la aplicación del lado del cliente y conectarla con las acciones y eventos. Cuando el visitante presiona el botón Atrás o ingresa una URL, la URL coincide con la ruta en particular y la acción especificada se activará como un evento.
Sintaxis:
router.routes
Parámetros: este parámetro es un objeto que hace coincidir la URL con la función o los eventos.
Ejemplo 1: en este ejemplo, ilustraremos el enrutador de rutas Backbone.js. Aquí asignaremos el componente URL a un evento que se escribirá en el documento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS routes Router</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>BackboneJS routes Router</h3>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
'': 'first_route',
'route/2': 'second_route'
},
first_route: function () {
document.write(
"This is by the Router first route.");
},
second_route: function () {
document.write(
"This is by the Router Second route.");
},
});
var router = new Router;
Backbone.history.start();
</script>
</body>
</html>
Producción:
Enrutador de rutas Backbone.js
Ejemplo 2: En este ejemplo, escucharemos el disparo par por las rutas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS routes Router</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>BackboneJS routes Router</h3>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
'': 'first_event',
'route/2': 'second_event'
},
});
var router = new Router;
router.on('route:first_event', function () {
alert(
"This event is trigger by Router")
});
Backbone.history.start();
</script>
</body>
</html>
Producción:
Backbone.js rutas Rotuer
Referencia: https://backbonejs.org/#Router-routes
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA