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は以下のとおりです。

init.coffee

init = =>

  game = new Game()


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



game.coffee

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要素を指します。関数バインディングを使用する：

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

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