У меня есть очень простая программа, написанная на 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')

toolbar.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». Пожалуйста, помогите мне понять, почему и как я могу решить эту проблему, не меняя слишком много моей программы.

Благодарим за помощь.

источник

2013-02-27 Jamie Fearon

Ваша проблема заключается в значении this keyword внутри обработчика события, где он указывает на элемент DOM вместо экземпляра панели инструментов. Использовать function binding:

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

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

источник

2013-02-27 12:27:33 Bergi

Благодарим за помощь –

Значение не передается на экземпляр класса

Проблема

ответ

Смежные вопросы