Perché i miei eventi CoffeeScript / backbone.js non sparare?

Question

Sto cercando di familiarizzare con CoffeeScript e backbone.js, e devo essere perso qualcosa.

Questa CoffeeScript:

MyView  = Backbone.View.extend 
   events: { 
     "click" : "testHandler" 
   } 

   testHandler: -> 
     console.log "click handled" 
     return false 

 view = new MyView {el: $('#test_container')} 
 view.render()

genera il seguente JavaScript:

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

Ma l'evento non click fuoco testHandler quando si fa clic in test_container.

Se cambio l'output Javascript per:

$(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;
});

Rimozione del call(this) e aggiungendo il $, tutto funziona come previsto. Che cosa mi manca?

Answer 1

(function () {}).call(this);

è solo un modo per invocare immediatamente una funzione anonima specificando un ricevitore. Funziona praticamente questo stesso modo di:

this.method = function () {};
this.method();

$(function () {}), almeno in jQuery, è una scorciatoia per

$(document).ready(function () {})

che gestisce la funzione data quando l'albero DOM è stato completamente costruito. Sembra che questa è la condizione necessaria per la funzione Backbone.View.extend per funzionare correttamente.

Answer 2

Per usare CoffeeScript e jQuery insieme per gli script di applicazione, inserire il codice in questa sorta di template:

$ = jQuery
$ ->

  MyView = Backbone.View.extend
    events:
      "click": "testHandler"
    testHandler: ->
      console.log "click handled"
      false

  view = new MyView el: $('#test_container')
  view.render()

Answer 3

Prova a usare la sintassi dichiarazione di classe CoffeeScript, per esempio:.

class BacklogView extends Backbone.View
  constructor: (@el) ->
    this.delegateEvents this.events

  events:
    "click" : "addStory"

  # callbacks
  addStory: ->
    console.log 'it works!'

Answer 4

Cosa succede quando la vista, o almeno view.el viene generata dinamicamente? È possibile chiamare i view.delegateEvents () per impostare manualmente le eventhandlers.

Ecco CoffeeScript simile per il rendering di una ChildView in un ParentView poi delegare gli eventi della childView.

window.ParentView = Backbone.View.extend
  addOne: (thing) ->
    view = new ChildView({model: thing})
    this.el.append view.render().el 
    view.delegateEvents()