0

我有一个用 CoffeeScript 编写的非常简单的程序，如果用户单击一个按钮，则应该在控制台中显示一个值。下面是我的代码：

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <button id='butn'>click here</button>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js 是编译后的 CoffeeScript。我的 CoffeeScript 如下：

初始化.coffee

init = =>

  game = new Game()


# Start it all off
$(document).ready(init)



游戏.咖啡

class Game

  constructor: () ->

    @UI = new UI()



ui.coffee

class UI

  constructor: () ->

    @toolbar = new Toolbar('foo')


工具栏.coffee

class Toolbar
  constructor: (@value) ->

    @clickhandler()


  clickhandler: () =>
    $('body').on 'click', '#butn', ->
        console.log 'Value = ', @value



编译后的 JS 是：

// Generated by CoffeeScript 1.3.3
(function() {
  var Game, Toolbar, UI, init,
    _this = this,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  init = function() {
    var game;
    return game = new Game();
  };

  $(document).ready(init);

  Game = (function() {

    function Game() {
      this.UI = new UI();
    }

    return Game;

  })();

  UI = (function() {

    function UI() {
      this.toolbar = new Toolbar('foo');
    }

    return UI;

  })();

  Toolbar = (function() {

    function Toolbar(value) {
      this.value = value;
      this.clickhandler = __bind(this.clickhandler, this);

      this.clickhandler();
    }

    Toolbar.prototype.clickhandler = function() {
      return $('body').on('click', '#butn', function() {
        return console.log('Value = ', this.value);
      });
    };

    return Toolbar;

  })();

}).call(this);



问题

值 'foo' 未显示在控制台上。控制台记录“Value =”但没有“foo”。请有人可以帮助我理解为什么以及如何在不更改太多程序的情况下解决此问题。

感谢你的帮助。

4

1 回答 1

2

您的问题是事件处理程序中this关键字的值，它指向 DOM 元素而不是 Toolbar 实例。使用函数绑定：

class Toolbar
  constructor: (@value) ->
    @clickhandler()

  clickhandler: () ->
    $('body').on 'click', '#butn', =>
      console.log 'Value = ', @value
于 2013-02-27T12:27:33.997 回答