Backbone.js es una biblioteca compacta que se utiliza para organizar el código JavaScript. Otro nombre para esto es un marco MVC/MV*. Si no conoce MVC, es solo un paradigma de arquitectura para crear interfaces de usuario. Las funciones de JavaScript simplifican mucho el diseño de la interfaz de usuario de un programa. Los modelos, las vistas, los eventos, los enrutadores y las colecciones se encuentran entre los componentes básicos que ofrece BackboneJS para ayudar a los desarrolladores a crear aplicaciones web del lado del cliente.
View el es la propiedad central de una vista. Se requiere que todas las vistas tengan una porque esencialmente se refiere a un elemento DOM. Hay dos formas de vincular un elemento DOM a una vista: haciendo referencia a un elemento existente en la página o creando un nuevo elemento específicamente para la vista y agregándolo al DOM. Las propiedades tagName , className e id se pueden especificar en la vista. La variable de nombre de etiqueta se utiliza para indicar el elemento DOM específico. Si no se ingresa nada, div se usará como el nombre de etiqueta predeterminado .
Sintaxis:
view.el
Ejemplo 1: El siguiente código muestra cómo podemos manipular contenido HTML usando la propiedad el .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js el 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 el View</h3>
<div id="content"></div>
<script type="text/javascript">
Demo = Backbone.View.extend({
initialize: function(){
document.write("Here we are accessing "
+ "the div with the 'content' id "
+ "with the el property.");
}
});
var demo = new Demo({ el: $("content") });
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el uso de las propiedades tagName , className e id como span , el-element y element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js el 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 el View</h3>
<div id="content"></div>
<script type="text/javascript">
var Demo = Backbone.View.extend({
// Required property, div by default
tagName: 'span',
// Optional, we can add more than
// one class to the property
className: 'el-element',
id: 'element' // Optional
});
var demo = new Demo();
console.log(demo.el);
</script>
</body>
</html>
Producción:
Referencia: https://backbonejs.org/#View-el
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA