Backbone.js es una biblioteca compacta que se utiliza para organizar el código JavaScript. Un marco MVC/MV* es otro término para ello. Si no está familiarizado con MVC, es solo un paradigma de diseño para interfaces de usuario. Las funciones de JavaScript facilitan considerablemente la creación de la interfaz de usuario de un programa. 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.
View $el también es la representación del elemento de la vista, pero es un objeto jQuery almacenado en caché. Esto también contiene el elemento pero con funciones jQuery habilitadas. Debido a que este $el mantiene una referencia a su elemento, no tendrá que buscar en el DOM cada vez que lo use. Con las ventajas para el rendimiento que esto sugiere.
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">
var Demo = Backbone.View.extend({
el: '#content',
initialize: function () {
this.render();
},
render: function () {
this.$el.html("Hello Geek!! Welcome "
+ "to GeeksforGeeks. This is a "
+ "demo of the $el in view.");
}
});
var myview = new Demo();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el uso y no 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>
<script type="text/javascript">
var Demo_1 = Backbone.View.extend({
initialize:function(){
this.render();
},
render:function(){
console.log(this.$el)
},
});
var Demo_2 = Backbone.View.extend({
tagName: 'span',
className: 'el-element',
id: 'element',
initialize:function(){
this.render();
},
render:function(){
console.log(this.$el)
},
});
var myview_1 = new Demo_1();
var myview_2 = new Demo_2();
</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