Search code examples
aurelia

Aurelia `@dynamicOptions` mixed with `@bindable`s


I am developing using aureliajs. By now I am working on a custom attribute which has marked to have dynamic options. For example consider following code:

  import {dynamicOptions, inject} from 'aurelia-framework';

  @dynamicOptions
  @inject(Element)
  export class SquareCustomAttribute {
    constructor(element){
      this.element = element;
    }

    propertyChanged(name, newValue, oldValue){
      switch(name){
        case 'fill':
          this.element.style.backgroundColor = newValue;
          break;
        case 'size':
          this.element.style.width = this.element.style.height = `${newValue}px`;
          break;
        default:
          this.element.style[name] = newValue;
          break;
      }
    }
  }

now for example consider that I want to give the property fill, defaultBindingMode of twoWay, so I will try to add the @bindable property in class. So the code will change to this:

  import {dynamicOptions, inject} from 'aurelia-framework';

  @dynamicOptions
  @inject(Element)
  export class SquareCustomAttribute {
    @bindable fill;

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

    propertyChanged(name, newValue, oldValue){
      switch(name){
        case 'fill':
          this.element.style.backgroundColor = newValue;
          break;
        case 'size':
          this.element.style.width = this.element.style.height = `${newValue}px`;
          break;
        default:
          this.element.style[name] = newValue;
          break;
      }
    }
  }

And binding stops working.

  1. So, the first question is how to set defaultBindingMode for dynamicOptions?

  2. And another little question. As aurelia.io says, Binding to a dynamic options attribute works exactly the same as binding to an options attribute in the DOM.. According to this sentence, I expect to bind dynamic options dash seperated and retrieve the in camel case on optionsChanged method. But dash seperated options bound from view, receives dash separated and camels, camels. Is this correct according to referenced sentence from aurelia.io?


Solution

  • Thanks to @bigopon, this issue is being followed up in this issue and I think any additional comment on that will be beneficial before making changes on aurelia-framework.