为什么我的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!'