Question

我有这个小班：

var SwitchHider;

SwitchHider = {
  inputSelector: 'body.socials input',
  _showOrHideClosestSwitch: function(element) {
    var socialUrl, swich_wrapper;
    socialUrl = $(element).val();
    swich_wrapper = $(element).closest('.white-box').find('.switch');
    if (socialUrl.length > 0) {
      return swich_wrapper.show();
    } else {
      return swich_wrapper.hide();
    }
  },
  _bindCallbacks: function() {
    $(document).on('ready', function() {
      return $(self.inputSelector).each(function(index, element) {
        return self._showOrHideClosestSwitch(element);
      });
    });
    return $(document).on('change keyup input', self.inputSelector, function() {
      return self._showOrHideClosestSwitch(this);
    });
  },
  initialize: function() {
    var self;
    self = this;
    this._bindCallbacks();
  }
};

window.SwitchHider = SwitchHider;

$(function() {
  SwitchHider.initialize();
});

（它是从这个CoffeeScript文件编译的，希望它有意义）：

SwitchHider =
  inputSelector: 'body.socials input'

  _showOrHideClosestSwitch: (element) ->
    socialUrl = $(element).val()
    swich_wrapper = $(element).closest('.white-box').find('.switch')
    if socialUrl.length > 0
      swich_wrapper.show()
    else
      swich_wrapper.hide()

  _bindCallbacks: ->
    $(document).on 'ready', ->
      $(self.inputSelector).each (index, element) ->
        self._showOrHideClosestSwitch(element)

    $(document).on 'change keyup input', self.inputSelector, ->
      self._showOrHideClosestSwitch(@)

  initialize: ->
    self = this
    @_bindCallbacks()
    return

# Send to global namespace
window.SwitchHider = SwitchHider

# DOM Ready
$ ->
  SwitchHider.initialize()
  return

当事件被触发时 - 它会出现此错误：

TypeError: self._showOrHideClosestSwitch is not a function

有谁知道为什么？这是我第一次尝试写这样的课程，不能完全理解我在做什么。

Answer 1

self不在范围内。这是一种类语法：

class SwitchHider
  @inputSelector: 'body.socials input'
  constructor: ->
    $(document).on 'ready', =>
      $(SwitchHider.inputSelector).each (index, element) =>
        @_showOrHideClosestSwitch(element)

    $(document).on 'change keyup input', SwitchHider.inputSelector, (e) =>
      @_showOrHideClosestSwitch(e.target)


  _showOrHideClosestSwitch: (element) ->
    socialUrl = $(element).val()
    swich_wrapper = $(element).closest('.white-box').find('.switch')
    if socialUrl.length > 0
      swich_wrapper.show()
    else
      swich_wrapper.hide()

# Send to global namespace
window.SwitchHider = SwitchHider

# DOM Ready
$ ->
  new SwitchHider()

我使用=>来处理this

的适当范围

Answer 2

self仅定义为initialize下的本地变量。它将无法用于其他方法。

  initialize: function() {
    var self;
    self = this;
    this._bindCallbacks();
  }

您需要在每个需要它的方法中定义本地self：

  _showOrHideClosestSwitch: (element) ->
    self = this
    # ...

  _bindCallbacks: ->
    self = this
    # ...

或者，您可以使用fat arrows to bind每次回调周围环境，然后使用this或@代替：

  _bindCallbacks: ->
    $(document).on 'ready', =>
      $(@inputSelector).each (index, element) =>
        @_showOrHideClosestSwitch(element)

    $(document).on 'change keyup input', self.inputSelector, (ev) =>
      @_showOrHideClosestSwitch(ev.currentTarget)

在事件处理程序中，仍然可以通过event.currentTarget检索通常为上下文值的Element。

为什么我得到一个＆＃39;不是一个功能＆＃39;这个JS类的错误？

2 个答案: