Backbone.js es una biblioteca compacta que se utiliza para organizar el código JavaScript. También se conoce como marco MVC/MV*. MVC es simplemente un paradigma de arquitectura para desarrollar interfaces de usuario si no está familiarizado con él. Diseñar la interfaz de usuario de un programa es mucho más fácil cuando se utilizan funciones de JavaScript. BackboneJS proporciona una variedad de elementos de construcción para ayudar a los desarrolladores a crear aplicaciones web del lado del cliente, incluidos modelos, vistas, eventos, enrutadores y colecciones.
El constructor de vista Backbone.js se crea por primera vez cuando se crea la vista por primera vez. Inicializa la vista. Cuando se genera una vista, se llama y utiliza la nueva palabra clave. Es una de varias opciones únicas que estarán directamente vinculadas a la vista. Si el método de inicialización se declara y define dentro de la vista, se llama automáticamente cuando se crea un objeto de vista, podemos llamar a todas las demás funciones dentro de este método usando esta palabra clave, lo que terminará con la necesidad de llamarlas con la referencia del objeto más adelante.
Sintaxis:
new View( options )
Parámetro utilizado:
- Opciones: Este parámetro es opcional. Puede ser una gran cantidad de valores diferentes, como un modelo, una colección, una identificación, un nombre de clase, un nombre de etiqueta, atributos y eventos.
Ejemplo 1: El siguiente código muestra cómo podemos crear una función de inicialización simple en una vista.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js constructor/initialize View</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 constructor/initialize View</h3>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
initialize:function(){
document.write(
'Hello Geek!! Welcome to GeeksforGeeks.' +
' This is a computer science portal for geeks.');
}
});
var myview = new ViewDemo();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código muestra cómo podemos manipular HTML usando la propiedad el . Luego, debemos agregar el contenido que queremos agregar/cambiar al objeto $el jQuery. Además, no hemos llamado a la función de representación con la referencia del objeto, la función de inicialización la llama.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js constructor/initialize View</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 constructor/initialize View</h3>
<div id="content"></div>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
initialize:function(){
this.render();
},
render:function(){
this.$el.html(
"Hello Geek!! Welcome to GeeksforGeeks." +
" This is a demo of view with using render function.")
}
});
var myview = new ViewDemo({
el: "#content"
});
</script>
</body>
</html>
Producción:
Referencia:https://backbonejs.org/#View-constructor
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA