translate [class|style|css].bind="someObject" to an interpolation binding

[jdanyow]

discussion

Example:

view

<div css.bind="styles" class.bind="classes"></div>

view-model

export class Foo {
  constructor() {
    this.styles = {
      color: green;
    };
    this.classes = {
      danger: false;
    }; 

    setTimeout(() => {
      // expected behavior- element's style and class list should react to these changes.
      this.styles.color = 'red';
      this.classes.danger = true;
    }, 5000);
  }
}

Notes:

• css/style attribute will support object binding in the upcoming release but does not react when the object's properties change, only when the object instance changes.
• we will not support addition/deletion of properties from the object because this would require Object.observe which is not well supported across browsers yet

[Alxandr]

Discussion

TLDR:

I think not supporting new properties will be a major pitfall Likely, it'll end up with users spamming issues about it

[EisenbergEffect]

Understood. I think we can do it eventually, but should probably not for this first pass. We can add some documentation on that and then try to address it after we do further core work on the binding system.

[Alexander-Taran]

still not working. but maybe nobody cares

[EisenbergEffect]

We can keep this open, though it's love priority since this doesn't block people from achieving the same end result through other means today.

[Esger]

I do care and I write getters like get fontStyle(){ return this._fontStyle; } and use that like <div css="font:${fontStyle}"></div> i.s.o. css.bind="..." The getter will act like a property that gets re-evaluated automatically through the string interpolation ${}. See https://ilikekillnerds.com/2016/02/binding-with-style-in-aurelia/

[Alexander-Taran]

@EisenbergEffect added to vNext candidates list. Can be closed