Modelos: Backbone.js Los modelos son una parte muy importante de la creación de aplicaciones. El modelo administra una tabla interna de atributos de datos y desenstring eventos de cambio cuando se modifica cualquiera de los datos de la tabla. Realiza muchas acciones en los datos, como control de acceso, validación, propiedad computada, etc. El modelo maneja la sincronización de datos con una capa de persistencia, generalmente una API REST con una base de datos de respaldo.
Características del modelo:
- Almacena los diversos datos y la lógica relacionada con los datos.
- Se utiliza para cargar datos del servidor y también almacena los datos del servidor.
- Activa eventos cuando sus datos cambian.
Ahora veremos como creamos Modelos y Vistas en Backbone.
Ejemplo 1: En este ejemplo, veremos cómo creamos un Modelo. Podemos crear un Modelo en Backbone con la siguiente sintaxis extendida.
let model = Backbone.Model.extend();
Aquí .extend( ) se utilizan para agregar la configuración del modelo. Podemos ver qué es modelo cuando buscamos un modelo en la consola.
Modelo
Ejemplo 2: En este ejemplo, crearemos una nueva instancia del modelo para usar Model. Podemos crear una nueva instancia con el nuevo constructor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello Geeks using Backbone.js</title>
<!-- Libraries -->
<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.3.3/underscore-min.js"
type="text/javascript"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"
type="text/javascript"></script>
</head>
<body>
<!-- OUr HTML -->
<div id="element">Hello Geeks for Geeks</div>
<!-- Javascript code -->
<script type="text/javascript">
let model = Backbone.Model.extend({});
let N_model = new model({
id: 1,
comment: "hello Geeks"
})
console.log(N_model)
</script>
</body>
</html>
Producción:
Instancia de modelo
Vistas: Backbone.js Views es la parte atómica de la interfaz de usuario. Las vistas se utilizan para representar los datos en la página después de cualquier evento DOM en la página web. Los modelos generalmente desconocen las vistas, pero las vistas escuchan el evento de cambio por parte del modelo. Representan cómo se ven los datos para el usuario. Son usuarios que manejan los cambios en las páginas y vinculan los eventos y métodos. Las vistas se utilizan para representar los métodos y la recopilación con eventos DOM.
Características de las Vistas:
- Escucha los eventos DOM y representa el modelo o la colección.
- También administra la entrada del usuario y todas las interacciones con los usuarios.
- También ayuda al Modelo al capturar la entrada del usuario.
Ejemplo 1: En este ejemplo, creamos Vistas con la ayuda de la siguiente sintaxis extendida.
let view = Backbone.View.extend();
Producción:
vista
Ejemplo 2: En este ejemplo, inicializamos la Vista con un nuevo constructor y respondemos a la inicialización con la propiedad de inicialización de la vista que se activa cuando la vista se inicializa como instancia.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello Geeks using Backbone.js</title>
<!-- Libraries -->
<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.3.3/underscore-min.js"
type="text/javascript"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"
type="text/javascript"></script>
</head>
<body>
<!-- OUr HTML -->
<div id="element">Hello Geeks for Geeks</div>
<!-- Javascript code -->
<script type="text/javascript">
var view = Backbone.View.extend({
initialize: function () {
console.log(" Hello Geek this is printed by View ")
},
});
// Here when we create instance function will called back
var N_view = new view();
</script>
</body>
</html>
Producción:
Resultado de la instancia de vista
Enlace de referencia: https://backbonejs.org/#Model-View-separation
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA