为什么我的coffeescript/backbone.js事件没有开火？

Question

我试图熟悉coffeescript和backbone.js，我一定会缺少一些东西。

这个咖啡网：

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

尝试使用Coffeescript类声明语法，例如：

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

  events:
    "click" : "addStory"

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

Answer 4

当视图或至少view.el是动态生成时会发生什么？您可以调用view.delegateevents（）方法来手动设置事件手。

这是类似的Coffeescript，用于在父景中渲染Childview，然后将Childview的事件委派。

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