Version 1.4.1 broke update callback

[ollie]

Hello,

I tried updating your library from 1.4.0 to 1.4.1 and noticed the picker is no longer passed into events which causes issues if multiple pickers are used in the same page. We use it like this (sorry for CoffeeScript):

class Abc
  constructor: ->
    for input in @inputs
      $input = $(input)
      picker = new CP(input)
      $input.data('picker', picker)
      picker.on('change', this._handlePickerChange)

  _handlePickerChange: (color, picker) => # <-- picker is undefined in 1.4.1
    color  = "##{color}"
    $input = $(picker.source)
    # ... do other stuff

Is this fixable or should we do things differently?

Thank you,
Ollie

[evolross]

I believe now that this inside the callback is the picker. See bottom comment on this issue: #42

[ollie]

Hm, this is a problem because this in our case is not the context of the function but our class object/instance. I could work around that by doing var self = this black magic and passing it into an anonymous function that would call the appropriate method and passing in your this as an argument, pretty much recreating what you removed.

jQuery solves this by having this refer to the element and also providing a parameter just in case you decide to rebind the context.

[taufik-nurrohman]

Try something like myFunc.apply(this, [a, b, c]) or myFunc.call(this, a, b, c) to pass the this scope to the myFunc context.

[ollie]

If I rebind the method, I lose the picker object (because it was passed as argument before but now it is as this). I cannot call the method when initializing, it's called when an event is triggered. I tried this picker.on('change', $.proxy(this._handlePickerChange, this)) for reference.

Edit: I have to do something like this:

class Abc
  constructor: ->
    self = this
    handlePickerChange = (color) ->
      # `self` is the component instance.
      # `this` is the picker instance.
      self._handlePickerChange(color, this)

    for input in @inputs
      $input = $(input)
      picker = new CP(input)
      $input.data('picker', picker)
      picker.on('change', handlePickerChange)

  _handlePickerChange: (color, picker) => # <-- works
    color  = "##{color}"
    $input = $(picker.source)
    # ... do other stuff

[taufik-nurrohman]

class Abc
  constructor: ->
    self = this
    handlePickerChange = (color) ->
      self._handlePickerChange.apply(this, [color])

[ollie]

I already am doing a call in the anonymous function so doing apply is not going to change anything. What I'd like to do is get rid of the anonymous function completely but that would require that the library passes the picker as an argument as it was before.

[taufik-nurrohman]

Oh I forgot this:

  _handlePickerChange: (color) =>
    color  = "##{color}"
    $input = $(this.source)