為什么我的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);

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

如果我將輸出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，用於在ParentView中呈現ChildView，然后委托childView的事件。

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