Backbone.js brinda estructura a las aplicaciones web al proporcionar modelos con enlaces clave-valor y eventos personalizados, colecciones con una rica API de vistas de funciones enumerables con manejo de eventos declarativo, y lo conecta todo a su API existente a través de una interfaz RESTful JSON.
Backbone.js listenTo Event notifica a un objeto que escuche un evento particular en otro objeto. La ventaja de utilizar este formulario es que listenTo permite que el objeto realice un seguimiento de los eventos y, más tarde, incluso se eliminan todos a la vez. Cuando ocurre un evento, la función de devolución de llamada se llamará con el objeto como contexto.
Sintaxis:
Object.listenTo( ohter , event, callback);
Valores paramétricos:
- otro: Este parámetro se utiliza para definir el nombre del objeto.
- event: este parámetro se utiliza para vincular el evento con un objeto.
- devolución de llamada: este parámetro se usa para hacer referencia a la función que se llama cuando ocurre un evento de enlace de objeto.
Ejemplo 1: este ejemplo describe la función Event listenTo() en BackboneJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
BackboneJS listenTo Event
</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>BackboneJS listenTo Event</h3>
<script type="text/javascript">
var first = _.extend({
value: 'GeeksforGeeks ',
}, Backbone.Events);
var second = _.extend({
value: 'Backbone Event listenTo',
}, Backbone.Events);
let callback = function() {
document.write(`</br>This is ` + this.value + ` course.`);
};
first.listenTo(first, 'listenVar', callback);
second.listenTo(first, 'listenVar', callback);
first.trigger('listenVar');
</script>
</body>
</html>
Aquí, la función _.extend() se usa para crear una copia de todas las propiedades de los objetos de origen sobre el objeto de destino y devolver el objeto de destino.
Producción:
evento listenTo()
Ejemplo 2: este ejemplo describe cuando escuchamos un objeto hasta que la página se destruye si vinculamos el evento con el objeto. Backbone.js listenTo siempre que se active el evento de vinculación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
BackboneJS listenTo Event Multiple times
</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>
BackboneJS listenTo Event
</h3>
<script type="text/javascript">
var temp = _.extend({
value: 'Backbone Event listenTo',
}, Backbone.Events);
let callback = function() {
document.write(`</br>This is `
+ this.value
+ " ");
};
temp.listenTo(temp, 'event', callback);
for(let i = 1; i < 6; i++) {
temp.trigger('event');
document.write(i + " time");
}
</script>
</body>
</html>
Producción:
listenTo() Evento con múltiples veces
Referencia: https://backbonejs.org/#Events-listenTo
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA