¿Por qué mis eventos CoffeeScript / Backbone.js no disparando?
-
29-09-2019 - |
Pregunta
Estoy intentando familiarizarme con CoffeeScript y Backbone.js, y debo estar perdiendo algo.
Esta CoffeeScript:
MyView = Backbone.View.extend
events: {
"click" : "testHandler"
}
testHandler: ->
console.log "click handled"
return false
view = new MyView {el: $('#test_container')}
view.render()
Genera el código JavaScript siguiente:
(function() {
var MyView, view;
MyView = Backbone.View.extend({
events: {
"click": "testHandler"
},
testHandler: function() {
console.log("click handled");
return false;
}
});
view = new MyView({
el: $('#test_container')
});
view.render;
}).call(this);
Pero el evento no click
testHandler
fuego cuando hago clic en test_container
.
Si cambio de la salida JavaScript para:
$(function() {
var MyView, view;
MyView = Backbone.View.extend({
events: {
"click": "testHandler"
},
testHandler: function() {
console.log("click handled");
return false;
}
});
view = new MyView({
el: $('#test_container')
});
view.render;
});
Extracción de la call(this)
y añadiendo el $
, todo funciona como se esperaba. ¿Qué me falta?
Solución
(function () {}).call(this);
es sólo una manera de inmediato invocar una función anónima al especificar un receptor. Funciona básicamente esta misma forma que:
this.method = function () {};
this.method();
$(function () {})
, al menos en jQuery, es la abreviatura de
$(document).ready(function () {})
que se ejecuta la función dada cuando el árbol DOM ha sido totalmente construido. Parece que esta es la condición necesaria para su función Backbone.View.extend
para que funcione correctamente.
Otros consejos
Para poder utilizar CoffeeScript y jQuery juntos por guiones de aplicación, poner su código en este tipo de plantilla:
$ = jQuery
$ ->
MyView = Backbone.View.extend
events:
"click": "testHandler"
testHandler: ->
console.log "click handled"
false
view = new MyView el: $('#test_container')
view.render()
Trate de usar la sintaxis de declaración de la clase CoffeeScript, por ejemplo:.
class BacklogView extends Backbone.View
constructor: (@el) ->
this.delegateEvents this.events
events:
"click" : "addStory"
# callbacks
addStory: ->
console.log 'it works!'
¿Qué pasa cuando la vista, o al menos view.el se genera de forma dinámica? Puede llamar a los view.delegateEvents () para ajustar manualmente los manejadores de sucesos.
Aquí está CoffeeScript similar para la prestación de un ChildView en un ParentView entonces Delegación de eventos del childView.
window.ParentView = Backbone.View.extend
addOne: (thing) ->
view = new ChildView({model: thing})
this.el.append view.render().el
view.delegateEvents()