¿Por qué mis eventos CoffeeScript / Backbone.js no disparando?

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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