爲什麼我的CoffeeScript/backbone.js事件不能觸發？

Question

我想讓自己熟悉CoffeeScript和backbone.js，並且我必須缺少一些東西。

這CoffeeScript的：

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

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

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

生成以下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); 

但click不會觸發事件testHandler當我test_container點擊。

如果我改變輸出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)和追加$，一切正常。我錯過了什麼？

Answer 1

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

只是一種在指定接收者時立即調用匿名函數的方法。它的工作原理基本上同樣的方式爲：

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

$(function() {})，至少在jQuery的，是

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

其運行給定功能時，DOM樹已經完全構造的簡寫。這似乎是您的Backbone.View.extend功能正常工作的必要條件。

Answer 2

對於使用的CoffeeScript和jQuery一起應用程序腳本，把你的代碼在這種模板：

$ = jQuery 
$ -> 

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

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

Answer 3

會發生什麼事的看法，或者至少view.el是動態生成的？您可以調用view.delegateEvents（）方法手動設置事件處理程序。

下面是用於在ParentView中呈現ChildView然後委派childView的事件的類似coffeescript。

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

Answer 4

嘗試使用CoffeeScript的類聲明的語法，例如：

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

    events: 
    "click" : "addStory" 

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