Backbone.js es una biblioteca compacta que se utiliza para organizar el código JavaScript. Marco MVC/MV* es otro término para ello. Si no está familiarizado, MVC es solo un enfoque de diseño para interfaces de usuario. Diseñar la interfaz de usuario de los programas es significativamente más fácil cuando se utilizan funciones de JavaScript. Algunos de los elementos de construcción que se ofrecen en BackboneJS para ayudar a los desarrolladores a crear aplicaciones web del lado del cliente son modelos, vistas, eventos, enrutadores y colecciones.
Navigate Router se usa principalmente para guardar la aplicación como una URL, se llama para actualizar la URL . Tiene dos opciones activar y reemplazar . La actividad del activador es permitir que la ruta siga llamando a la función de ruta cuando se establece en verdadero. Y cuando agregamos la opción de reemplazo con verdadero como valor, nos permite actualizar la URL sin crear ningún cambio en el historial del navegador.
Sintaxis:
router.navigate(fragment, options)
Parámetros:
- fragmento: Es el nombre del parámetro en el que se mostrará la URL que sigue a este parámetro.
- opciones: este parámetro contiene las opciones como activar y reemplazar que le permiten llamar a la función de ruta y cambiar la URL.
Ejemplo 1: El siguiente código demuestra cómo podemos actualizar la URL a lo que deseamos cuando coincide la devolución de llamada de la ruta.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js navigate 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>Backbone.js navigate Routerr</h3>
<div class="container-fluid">
<ul>
<li><a href="#/">Default Route</a></li>
<li><a href="#/1">First Route</a></li>
<li><a href="#/2">Second Route</a></li>
<li><a href="#/3">Third Route</a></li>
</ul>
</div>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
"": "defaultRoute",
"1": "firstRoute",
"2": "secondRoute",
"3": "thirdRoute",
},
defaultRoute: function () {
this.navigate("#/default");
},
firstRoute: function () {
this.navigate("#/first");
},
secondRoute: function () {
this.navigate("#/second");
},
thirdRoute: function () {
this.navigate("#/third");
},
});
router = new Router();
Backbone.history.start();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra cómo podemos actualizar la URL aplicando la función onclick en la vista.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js navigate 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>
<script type="text/javascript">
var Route_1 = Backbone.View.extend({
el: "#menu",
events: {
"click a": "onClick",
},
onClick: function (e) {
router.navigate("/");
},
});
var Router = Backbone.Router.extend({
routes: {
"route/:id": "defaultRoute",
},
});
var route = new Route_1();
Backbone.history.start();
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Backbone.js navigate Router</h3>
<p>
It refers to the view class 'Menu' and
creates the 3 links which changes the
url when you click on the links
</p>
<section id="menu">
<ul>
<li><a href="#/route/1">
Click to view first route
</a></li>
<li><a href="#/route/2">
Click to view second route
</a></li>
<li><a href="#/route/3">
Click to view third route
</a></li>
</ul>
</section>
</body>
</html>
Producción:
Referencia: https://backbonejs.org/#Router-navigate
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA