Pourquoi mes événements CoffeeScript / Backbone.js ne se déclenchent pas?
-
29-09-2019 - |
Question
Je suis en train de me familiariser avec CoffeeScript et Backbone.js, et je dois manquer quelque chose.
CoffeeScript:
MyView = Backbone.View.extend
events: {
"click" : "testHandler"
}
testHandler: ->
console.log "click handled"
return false
view = new MyView {el: $('#test_container')}
view.render()
Génère le code JavaScript suivant:
(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);
Mais l'événement click
n'a pas testHandler
de feu lorsque je clique dans test_container
.
Si je change le JavaScript sortie:
$(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;
});
Retrait de la call(this)
et la $
annexant, tout fonctionne comme prévu. Qu'est-ce que je manque?
La solution
(function () {}).call(this);
est juste une façon de prendre immédiatement un fonction anonyme en spécifiant un récepteur. Il fonctionne essentiellement de cette même manière que:
this.method = function () {};
this.method();
$(function () {})
, au moins en jQuery, est un raccourci pour
$(document).ready(function () {})
qui exécute la fonction donnée lorsque l'arbre DOM a été entièrement construit. Il semble que c'est la condition sine qua non pour votre fonction Backbone.View.extend
fonctionne correctement.
Autres conseils
Pour utiliser CoffeeScript et jQuery ensemble pour les scripts d'application, mettez votre code dans ce genre de modèle:
$ = jQuery
$ ->
MyView = Backbone.View.extend
events:
"click": "testHandler"
testHandler: ->
console.log "click handled"
false
view = new MyView el: $('#test_container')
view.render()
Essayez d'utiliser la syntaxe de déclaration de classe CoffeeScript, par exemple:.
class BacklogView extends Backbone.View
constructor: (@el) ->
this.delegateEvents this.events
events:
"click" : "addStory"
# callbacks
addStory: ->
console.log 'it works!'
Qu'est-ce qui se passe quand la vue, ou au moins view.el est généré dynamiquement? Vous pouvez appeler la méthode view.delegateEvents () pour définir manuellement les eventhandlers.
Voici coffeescript similaire pour rendre une ChildView dans une ParentView déléguer ensuite les événements de la ChildView.
window.ParentView = Backbone.View.extend
addOne: (thing) ->
view = new ChildView({model: thing})
this.el.append view.render().el
view.delegateEvents()