Pourquoi mes événements CoffeeScript / Backbone.js ne se déclenchent pas?

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?

Answer 1

(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.

Answer 2

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()

Answer 3

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!'

Answer 4

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()