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

Question

Sto cercando di familiarizzare con CoffeeScript e backbone.js e mi manca qualcosa.

Questo 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 si attiva clicktestHandler quando scatto 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. Cosa mi manca?

Answer 1

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

è solo un modo per richiamare immediatamente una funzione anonima mentre si specifica un destinatario. Funziona praticamente questo stesso modo:

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 sia la condizione necessaria affinché la tua funzione Backbone.View.extend funzioni correttamente.

Answer 2

Per utilizzare CoffeeScript e jQuery insieme per gli script di applicazione, inserire il codice in questo tipo di modello:

$ = jQuery 
$ -> 

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

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

Answer 3

Cosa succede quando la vista, o almeno view.el viene generata dinamicamente? È possibile chiamare il metodo view.delegateEvents() per impostare manualmente gli eventhandler.

Ecco un coffeescript simile per il rendering di ChildView in un ParentView, quindi delega degli eventi di childView.

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

Answer 4

Prova utilizzando la sintassi dichiarazione di classe CoffeeScript, ad es .:

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

    events: 
    "click" : "addStory" 

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