pass binding context through to custom binding functions

[elainemacurdy]

This is a follow up to the solution implemented for #22.

Any chance we could get the binding context passed through to the custom binding function too? I need to do something like the following:

var bindingToggleFormField = function(el, value, previousValue, bindingContext) {
  var fieldName = el.getAttribute('data-hook');
  if (this._fieldViews[fieldName]) {
    var newValue = value && bindingContext.showWhen;
    this._fieldViews[fieldName].set('isVisible', newValue);
  }
}
...
bindings: {
  isFoo: {
    type: bindingToggleFormField,
    hook: 'barField',
    showWhen: [true || false]
  }
}

props: {
  isFoo: 'boolean'
}

FWIW in the short term I implemented this kind of thing:

var bindingToggleFormField = {
  showWhenTrue: function(el, value, previousValue) {
    var fieldName = el.getAttribute('data-hook');
    if (this._fieldViews[fieldName]) {
      this._fieldViews[fieldName].set('isVisible', value);
    }
  },
  showWhenFalse: function(el, value, previousValue) {
    var fieldName = el.getAttribute('data-hook');
    if (this._fieldViews[fieldName]) {
      this._fieldViews[fieldName].set('isVisible', !value);
    }
  }
}
...
bindings: {
  isFoo: {
    type: bindingToggleFormField.showWhenTrue || bindingToggleFormField.showWhenFalse,
    hook: 'barField'
  }
}

... which gets the job done, but is less elegant.

Thanks!

[lukekarrys]

Hi @elainemacurdy! I understand the use case here, but I'm wary to couple custom type functions with the binding object. For a project I'm working on, we keep some custom bindings in a directory /helpers/bindings and require those throughout the project. If we were using this functionality it would add another step to making sure they were being used correctly in our app, which I'm not sure is ideal to be core functionality for this module. I'm not set in stone about this, but at first glance it feels like a bit of an anti-pattern to me.

The good news is that I think the example can be made more elegant by using partialRight from lodash:

var partialRight = require('lodash.partialright');
var bindingToggleFormField = function (el, value, previousValue, showWhen) {
  var fieldName = el.getAttribute('data-hook');
  if (this._fieldViews[fieldName]) {
    var newValue = value && showWhen;
    this._fieldViews[fieldName].set('isVisible', newValue);
  }
};

bindings: {
  isFoo: {
    type: partialRight(bindingToggleFormField, true), // or partialRight(bindingToggleFormField, false)
    hook: 'barField'
  }
}

I'll let some other @AmpersandJS/core-team chime in here too, just my 2 cents. Thanks for the issue!

[pgilad]

I actually think the custom binding function should receive the binding object. Adding it is pretty simple and it totally backwards compatible (add another param to the custom function).

It makes sense that the custom binding function has a need to know of the binding object