El enrutador de ruta Backbone.js es un método que se utiliza para crear la ruta para el enrutador manualmente. El argumento de la ruta puede ser una string de enrutamiento o una expresión regular y cada string de captura de la ruta se pasa a la función de devolución de llamada de la ruta.
Sintaxis:
router.route( route, name, callback );
Parámetros:
- ruta: este parámetro es una string de enrutamiento que coincidirá con la URL.
- nombre: este parámetro se usa para nombrar la ruta de activación: nombre cuando la ruta coincida.
- devolución de llamada: este parámetro es una función que se llamará cada vez que coincida la ruta.
Ejemplo 1: en este ejemplo, ilustraremos el enrutador de ruta Backbone.js. Aquí coincidirá con la ruta y agregará algunas strings en DOM.
HTML
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS route 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 style="text-align:center;" id="body">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>BackboneJS route Router</h3>
<li> <a href="#/link/1">link_1 </a> </li>
<p id='1'> </p>
<script type="text/javascript">
function write() {
document.getElementById('1')
.append("This is written by route");
}
var Router = Backbone.Router.extend({});
var router = new Router();
router.route("link/1", 'link', write);
Backbone.history.start();
</script>
</body>
</html>
Salida: en la ruta de salida, haga coincidir la URL y agregue la string.
Enrutador de ruta Backbone.js
Ejemplo 2: En este ejemplo, usaremos la ruta predeterminada que coincidirá con todas las URL si la URL no está definida en la ruta.
HTML
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS route 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 route Router</h3>
<ul>
<li> <a href="#/link/1">link_1 </a> </li>
<li> <a href="#/linkisdefault">other link </a> </li>
</ul>
<p id='1'> </p>
<p id='2'> </p>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
'link/:id': 'link',
'*default': 'link2',
},
link: function () {
document.getElementById('2')
.append("This is written by route");
},
link2: function () {
document.getElementById('1')
.append("This is written by Default route hello");
}
});
var router = new Router();
Backbone.history.start();
</script>
</body>
</html>
Producción:
Enrutador de ruta Backbone.js
Referencia: https://backbonejs.org/#Router-route
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA