我有一个用 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”。请有人可以帮助我理解为什么以及如何在不更改太多程序的情况下解决此问题。
感谢你的帮助。