为什么我的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事件不会触发.testHandlertest_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()