allow custom types to be created and run

[lukekarrys]

The API for ampersand-dom-bindings would be:

domBindings({
  'model.key': {
    type: 'customType',
    selector: '.thing'
  }
}, {
  customType: function (el, value, previousValue) { /* ... */ }
})

The idea is that ampersand-view could have a bindingTypes hash that would get passed to ampersand-dom-bindings so that they could be used like this:

View.extend({
  bindings: {
    'model.name': {
        type: 'customNameValue',
        hook: 'name'
    }
  },
  bindingTypes: {
    customNameValue: function (el, value, previousValue) { /* ... */ }
  }
});

Closes #21

[HenrikJoreteg]

Even though I like the flexibility idea of this, i'm not thrilled about extending view in order to support this.

I wonder if we shouldn't do this entirely just by letting users pass a function instead of a string "type"

Then this would be the only thing needed for adding custom binding types:

var View = require('ampersand-view');
var myBindingFunc = require('my-binding-func');


View.extend({
  bindings: {
    'model.name': {
      type: myBindingFunc,
      hook: 'name'
    }
  }
});

[lukekarrys]

@HenrikJoreteg I agree that adding to the view API isn't really necessary here since the example you showed is pretty simple and easy to grasp.

It was already possible with this PR to pass in a function as the type but I removed all the customTypes stuff. So the API is just:

domBindings({
  'model.key': {
    type: function (el, value, previousValue) { /* ... */ },
    selector: '.thing'
  }
});

[HenrikJoreteg]

So the minor feedback i mentioned is i'd rather we determine at the top while we're doing the "parsing" anyway whether or not this is a custom binding and if so applying it. Rather than doing that as the last check since we're comparing all the others against strings.

basically determininng if it's a function or string first.

[elainemacurdy]

Hi there, quick follow up to this. 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'
}

I'm sure there's a different way to implement it, this just occurred to me as pretty elegant if it could be supported.

Thanks!
Elaine

[bear]

@elainemacurdy you may want to file a seperate issue for your question - it was made on a closed PR and that will reduce it's visibility

[elainemacurdy]

Oh fair enough, sorry I missed that it was closed. I'll do that.