33

いくつかのjqueryイベントリスナーを持つcoffeescriptクラスがあります。=>クラスを参照する必要がないように太い矢印を使用したいのですが、通常は。で使用される要素への参照が必要thisです。どうすれば両方を使用できますか？

class PostForm
    constructor: ->
        $('ul.tabs li').on 'click', =>
            tab = $(this)
            @highlight_tab(tab)
            @set_post_type(tab.attr('data-id'))

    highlight_tab: (tab)->
        tab.addClass 'active'

    set_post_type: (id) ->
        $('#post_type_id').val(id)
4

4 に答える 4

37

CoffeeScript はthisと@外部コンテキストの両方にリンクするため、jQuery が提供するコンテキスト (別名、目的の「これ」) にアクセスすることはできません。event.target代わりに使用してください:

class PostForm
    constructor: ->
        $('ul.tabs li').on 'click', (event) =>
            tab = $(event.target)
            @highlight_tab(tab)
于 2012-09-28T23:12:05.110 に答える
36

evt.currentTarget の使用

おそらく、 (そうでない) の代わりに(これevt.currentTargetは と同等です) を使用する必要があります。通知のためにタップしているノードに子ノードがある場合、ハンドラーを 追加したノードではなく、それらの子ノードの 1 つである可能性があります。thisevt.targetclickevt.targetclick

この動作のデモについては、http://codepen.io/ddopson/pen/erLivを参照してください。(内側の赤いボックスをクリックしてcurrentTarget、赤い div をtarget指し、イベント ハンドラーが登録されている外側の青い div を指していることを確認します)

$('ul.tabs li').on 'click', (event) =>
  tab = $(event.currentTarget)
  @highlight_tab(tab)

質問への回答 - `=>` と `this` の両方を取得:

次のことができます...

$('ul.tabs li').on 'click', (event) =>
  tab = $(` this `)     # MAKE SURE TO ADD THE SPACES AROUND `this`
  @highlight_tab(tab)

thisコーヒーがむしゃむしゃ食べるのを防ぐため、スペースは重要_thisです。

「self」と「->」の使用

または、次の操作を行います...

self = this
$('ul.tabs li').on 'click', (event) ->
  tab = $(this)
  self.highlight_tab(tab)

これは CQQL の回答に似ていますがself、変数名として慣用的に使用することを好みます。私のVIM 構文強調表示規則はself、this、arguments、またはprototype.

于 2013-03-14T23:48:23.583 に答える
3

より簡単に理解できるので、私はこのバージョンを好みます。

class PostForm
    constructor: ->
        post_form = this

        $('ul.tabs li').on 'click', (event) ->
            tab = $(this)
            post_form.highlight_tab(tab)
于 2012-09-28T23:14:51.863 に答える