尝试在Fancybox回调中调用CoffeeScript方法时的作用域问题

Question

I have the following CoffeeScript module named Course. I have a small piece of code which I would like to re-use, I have created a method called preSelectItemSize .

I would like to call this method when init is called and also within the afterShow Fancybox callback. The following code works , but it don't believe it is correct to use the module name and I should be using the @ reference to "this" instead.

What am I doing wrong? (Code snippet reduced for brevity)

$ = window.jQuery = require("jquery")
Course =

  init: ->

    $('.js-product-overlay').on 'click', (e) =>
      @viewProductClickHandler(e, MediaDetection)

    @preSelectItemSize()

  viewProductClickHandler: (e, mediaDetection) =>

    $('.js-product-overlay').fancybox({
      href: wishlist_overlay_href
      maxWidth: '775px'
      minHeight: '495px'
      autoCenter: '!isTouch'
      height: 'auto'
      scrolling: true
      fitToView: false
      autoSize: false
      padding: 0
      tpl:
        closeBtn: '<a class="fancybox-item modal__close fancybox-close" href="javascript:;">Close</a>'
      afterShow: ->
        $('.js-fancybox-close').on 'click', (e) ->
          e.preventDefault()
          $.fancybox.close()

        Course.preSelectItemSize()
    })

  preSelectItemSize: ->
    itemId = $('.modal__product-info').attr('data-item-id')
    $('#size-' + itemId).click()

module.exports = Course

Answer 1

I think your real problem is that you're using a simple object literal rather than a class so => doesn't quite behave the way you expect it to and you're left referring to Course by name.

If we look at a simplified example:

o =
  m: =>

we can see what's going on by looking at the JavaScript that gets produced:

var o;
o = {
  m: (function(_this) {
    return function() {};
  })(this)
};

Because we have just a simple data structure (ie a plain old object literal), there is no constructor to bind m to any instance and it behaves as though you said:

m = =>
o = m: m

so any function properties of o (or Course in your case) are just plain old properties that happen to be functions, they're not really methods.

You could drop all the fat-arrows and refer to Course by name or you could switch to a class so that there is an instance for CoffeeScript to bind things to:

class Course
  #...
module.exports = new Course

Answer 2

The following works by changing the viewProductClickHandler to a thin arrow and changing the afterShow callback to a fat arrow:

Course =

  init: ->

    $('.js-product-overlay').on 'click', (e) =>
      @viewProductClickHandler(e, MediaDetection)

    @preSelectItemSize()

  viewProductClickHandler: (e, mediaDetection) ->

    $('.js-product-overlay').fancybox({
      href: wishlist_overlay_href
      maxWidth: '775px'
      minHeight: '495px'
      autoCenter: '!isTouch'
      height: 'auto'
      scrolling: true
      fitToView: false
      autoSize: false
      padding: 0
      tpl:
        closeBtn: '<a class="fancybox-item modal__close fancybox-close" href="javascript:;">Close</a>'
      afterShow: =>
        $('.js-fancybox-close').on 'click', (e) ->
          e.preventDefault()
          $.fancybox.close()

        @preSelectItemSize()
    })

  preSelectItemSize: ->
    alert "preSelectItemSize executed."
    itemId = $('.modal__product-info').attr('data-item-id')
    $("#size-#{itemId}").click()

Course.init()

See fiddle for example of working code: https://jsfiddle.net/L5u31Lzr/1/