コールクラスの機能、同じクラスの機能

Question

の内側に、私は次のCoffeeScriptクラスがあります。my nav_tabs_ajax_calls機能で

class Teams 
    rankings: -> 
    this.nav_tabs_ajax_calls() 

    window.history.pushState(
     '', 
     '', 
     CoffeeRoutes.path('rankings_team', { 'id': this.team_id() }) 
    ) 

    $('li.active').removeClass('active') 
    $('li:has(a[href="#rankings"])').addClass('active') 

    exercises: -> 
    this.nav_tabs_ajax_calls() 

    window.history.pushState(
     '', 
     '', 
     CoffeeRoutes.path('exercises_team', { 'id': this.team_id() }) 
    ) 

    $('li.active').removeClass('active') 
    $('li:has(a[href="#exercises-list"])').addClass('active') 

    $(document).on 'click', '#add-exercise', -> 
     showModal("exercises", false, createModal); 

    createModal("exercises"); 

    users: -> 
    window.history.pushState(
     '', 
     '', 
     CoffeeRoutes.path('users_team', { 'id': this.team_id() }) 
    ) 

    $('li.active').removeClass('active') 
    $('li:has(a[href="#enrolled-students"])').addClass('active') 

    graph: -> 
    window.history.pushState(
     '', 
     '', 
     CoffeeRoutes.path('graph_team', { 'id': this.team_id() }) 
    ) 

    $('li.active').removeClass('active') 
    $('li:has(a[href="#graph"])').addClass('active') 

    initialize_graph(); 

    $('#pause-resume').click -> 
     if $('#pause-resume i').attr('class') == "fa fa-pause" 
     pause() 
     $('#pause-resume i').attr('class', 'fa fa-play') 
     $('#pause-resume i').attr('title', 'Resume graph animation') 

     else 
     resume() 
     $('#pause-resume i').attr('class', 'fa fa-pause') 
     $('#pause-resume i').attr('title', "Stop graph animation") 


    $('#back-center').click -> 
     reset() 

    $('#remove-graph').click -> 
     dispose() 

    $(document).on 'click', '#add-nodes', -> 
     showModal('search', false, createModal) 

    $(document).on 'click', '#search-btn', -> 
     div = $(document.createElement('div')) 
     div.attr('id', 'loading-modal') 
     $('.modal-content').append(div) 

    team_id: -> 
    $('#show-team').data('team-id') 

    nav_tabs_ajax_calls: -> 
    $('a[href="#rankings"]').click -> 
     $.ajax CoffeeRoutes.path('rankings_team', { 'id': this.team_id() }) 
     type: 'GET', 
     dataType: 'script' 

    $('a[href="#exercises-list"]').click -> 
     $.ajax CoffeeRoutes.path('exercises_team', { 'id': this.team_id() }) 
     type: "GET", 
     dataType: 'script' 

    $('a[href="#enrolled-students"]').click -> 
     $.ajax CoffeeRoutes.path('users_team', { 'id': this.team_id() }) 
     type: "GET", 
     dataType: 'script' 

    $('a[href="#graph"]').click -> 
     $.ajax CoffeeRoutes.path('graph_team', { 'id': this.team_id() }) 
     type: "GET", 
     dataType: 'script' 

を、私は私のrankings関数を呼び出す場合、私はのために、（次のエラーを受信して​​いますインスタンス）：Uncaught TypeError: this.team_id is not a function(…)。

私の機能からthis.nav_tabs_ajax_calls()を削除すると、エラーは発生せず、他の機能でthis.team_id()が呼び出されます。

私は間違っていますが、どうすれば修正できますか？

Answer 1

「これ」は、文脈がそう以来、グローバルウィンドウになります「（this.team_id）」は、実際にイベントコールバックを「クリック」の中から呼び出されています。 「クリック」イベントリスナーをアタッチする前にteam_idをキャプチャするか、「クリック」コールバック関数をプロキシすることができます。

nav_tabs_ajax_calls: -> 
tID = this.team_id(); 
$('a[href="#rankings"]').click -> 
    $.ajax CoffeeRoutes.path('rankings_team', { 'id': tID }) 
    type: 'GET', 
    dataType: 'script' 
// etc. replacing "this.team_id()" with "tID" 

OR（と私はCoffeeScriptの専門家ではないので、これは正しい構文ではないかもしれない）

$('a[href="#rankings"]').click -> 
    $.proxy($.ajax(CoffeeRoutes.path('rankings_team', { 'id': tID }), { 
    type: 'GET', 
    dataType: 'script' 
    }, this) 
// etc. 

Answer 2

内部機能には=>を使用する必要があります。

->の内部関数は、デフォルトでは未定義にバインドされた通常の関数です。 =>の場合は、関数インスタンス化コンテキストの値thisでバインドします。この

チェック： Call method in class from another method in same class which is running inside a instance function