Access a custom attribute's binding from another custom attribute

1
votes

Say I have an Aurelia Custom Attribute that I am working with, is it possible to fire an event when a value bound to another Custom Attribute changes?

To put it in more concrete terms, I am building an Aurelia Custom Attribute for Chosen. I got all of Chosen working.

But the <select> element has a focus.bind="isFocused" on it. I need to know (in my Chosen Custom Attribute) when that bound value changes.

Is there some way to access that focus binding (from the focus Custom Attribute) in my Chosen Custom Attribute? Maybe using the binding engine or even an internal method?

(NOTE: I considered making a custom element to do this, but Aurelia does not work well for wrapping elements. I would have to code up connections for styles, classes and anything else that is on the original select component.)

2
javascriptaurelia
Perhaps you can use the binding behavior signal: aurelia.io/hub.html#/doc/article/aurelia/binding/latest/… Just a first thought - Marc Scheib
@marc I looked into that extensively. It will not work for this situation. - Vaccano

2 Answers

0
votes

I'm not sure if this is right way of doing this, but it's the easiest way I've found so far.

my-attr.js

import { inject } from 'aurelia-framework';
import { Focus } from 'aurelia-templating-resources';

@inject(Focus)
export class MyAttrCustomAttribute {

  constructor(focusAttr) {
    this.focusAttr = focusAttr;
  }

  attached() {
    console.log(this.focusAttr.value); //bound value

    //...
    //extending the change event. BE CAREFUL!
    //...

    const originalValueChanged = this.focusAttr.valueChanged;
    this.focusAttr.valueChanged = function(newValue) {
      console.log('Focus bound value has changed!'); //<-- call an event before "focus"
      originalValueChanged.call(this, newValue); //<-- "focus" is enqueued
      // <--- enqueue an event event here to be called after "focus"
    }

  }
}

Running example https://gist.run/?id=ab04facb60b39f9c6a5fc49c2fd278a6

0
votes

Try using a binding behavior to intercept the binding's updateSource (update the view model) and updateTarget (update the view) methods. There's a running example of this in the docs under the Custom binding behaviors section.

http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-binding-behaviors/8