为什么我的 CoffeeScript/backbone.js 事件没有触发？答案

【问题标题】：Why are my CoffeeScript/backbone.js events not firing?为什么我的 CoffeeScript/backbone.js 事件没有触发？
【发布时间】：2011-05-05 17:21:10
【问题描述】：

我正在尝试熟悉 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) 并附加$，一切正常。我错过了什么？

【问题讨论】：

看起来您正在使用 jQuery。是否要添加 jQuery 标签？

标签： javascript jquery coffeescript backbone.js

【解决方案1】：

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

只是一种在指定接收者时立即调用匿名函数的方法。它的工作方式基本上与以下相同：

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

$(function () {})，至少在 jQuery 中，是简写

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

在 DOM 树完全构建后运行给定的函数。看来这是您的Backbone.View.extend 函数正常工作的必要条件。

【讨论】：

啊，好的，谢谢，我一直在想 (function (){}).call(this) 和 $(function(){}) 是一样的。现在更有意义了。

【解决方案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()

【讨论】：

【解决方案3】：

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

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

  events:
    "click" : "addStory"

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

【讨论】：

一段时间后我找到了更好的解决方案.. 今天 StackOverflow 提醒了自己（我赢得了一些徽章:) 所以更好的解决方案是在构造函数方法体的第一行调用 super 并放弃对 this.delegateEvents 的调用。祝你好运；）
在您的示例中使用 super() 作为第一行的构造函数对我有用。

【解决方案4】：

当动态生成视图或至少 view.el 时会发生什么？您可以调用 view.delegateEvents() 方法来手动设置事件处理程序。

这里有类似的咖啡脚本，用于在 ParentView 中渲染 ChildView，然后委派 childView 的事件。

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

【讨论】：