support style binding about binding HOT 18 CLOSED

There are three options I have in mind, hopefully we could support both:

1. style="width: ${prop}px"
2. style="width.bind: prop"
3. style.bind="someProperty"

Our current options properties for attached behaviors support these patterns and I thought it would be nice to have it work the same for style. We need special handling to make it happen though. I haven't looked into what it would take just yet.

If we do 3 then we should probably also do class.bind="someProperty" as well.

from binding.

in # 3 (style.bind), the value of someProperty is a string? something like 'color: #23432; margin-top: 25px;' or is it an object (like KO) or both?
same question for the class.bind scenario.

would it be possible to change # 2 to this: style.width.bind="someProperty" or this style-width.bind="someProperty"

from binding.

I'm wondering if we could handle both scenarios. One way might be with a value converter (which we can make built in) that converts objects into strings, for example.

from binding.

another option for # 2- maybe we introduce the value converter : argument syntax to attached behaviors?

<div style:background-color.bind="propertyName"></div>

from binding.

I'd like to not add more syntax if I can help it. One problem with this in particular is that it looks like a namespace. The second option is already implemented for attached behavior so if we can make the built-in style work the same, that would be my preference, for consistency sake.

from binding.

played around with this some- might need to change course:

app.html

<template>
  <h1>Scenario #1</h1>
  <div style="color: ${color}; background-color: ${backgroundColor}">
    test
  </div>

  <h1>Scenario #2</h1>
  <div style="color.bind: color; background-color.bind: backgroundColor">
    test
  </div>

  <h1>Scenario #3</h1>
  <div style.bind="style">
    test
  </div>
</template>

app.js

import {declarePropertyDependencies} from 'aurelia-framework';

export class App {
  constructor() {
    this.color = '#FF0040';
    this.backgroundColor = '#610B21';
    setInterval(() => {
      var temp = this.color;
      this.color = this.backgroundColor;
      this.backgroundColor = temp;
    }, 1000);
  }

  get style() {
    return `color: ${this.color}; background-color: ${this.backgroundColor}`;
  }
}

declarePropertyDependencies(App, 'style', ['color', 'backgroundColor']);

• A small change to the ElementObserver adds support for scenario 3 in all browsers.
• The same change adds support for scenario 1 in all browsers except Internet Explorer. IE seems to be strict about invalid css in the style attribute. In scenario 1, when TemplatingBindingLanguage.inspectAttribute is called, the attrValue argument is empty string. The DOM explorer also shows style="". I suspect we'll encounter the same issue when adding support for scenario 2 if the binding expressions are non-trivial.

Does this mean we must go with a different attribute name? au-style maybe? Or do we scale back this feature to only include scenario 3?

from binding.

That's disappointing. I wonder if there's any other way, via the DOM, to get at the raw style value. If not, we probably will need to add au-style. It's not that big of a deal...but it rubs me the wrong way. I was really hoping to not bring in custom behaviors for normal binding scenarios. Can you do a little more research around style and see if there's any other way to get that value?

from binding.

sure

from binding.

still researching but here's some early findings (not promising):

original markup for $0 is:

<div style="color: ${color}; background-color: ${backgroundColor}">
    scenario 1
  </div>

console tests:

style panel:

strange the style panel shows some info- must be a way to get at this that I haven't tried

from binding.

What about $0.attributes.style it seems to return the raw value here

edit well $0.attributes.style.value to get the value I guess

from binding.

not for me, I get an empty string.

from binding.

Edit Nevermind just re-read everything and saw this was only for IE

from binding.

I'm voting for css="color: ${color}"

from binding.

@AshleyGrant , @PWKad and I were discussing this some more in the gitter.... here's a recap:

style.bind
All browsers support what we want to do with <input style.bind="someProperty">. We're updating the ElementObserver to assign the element's style.cssText property. someProperty might be a string, color: red; background-color: blue; or it might be an object which we'd flatten into a css string.

interpolation style="color: ${someProperty}"
All browsers except Internet Explorer support this syntax. Internet Explorer "blanks out" the style attribute when it encounters invalid css. We couldn't find a way to get the original markup so we need to use a different attribute name. Several options have been proposed:

• <input au-style="color: ${someProperty}">
• <input css="color: ${someProperty}">
• <input style.interpolate="color: ${someProperty}">
• <input style.parse="color: ${someProperty}">
• <input style.assign="color: ${someProperty}">
• <input style.set="color: ${someProperty}">

There are pros and cons for each approach:

• The au-style and css approaches introduce a new attribute for assigning style which will require us to document the app behavior when both a css/au-style attribute and a native style attribute are present on the same element. Not to mention we'll need to document that css should be used instead of style when doing interpolation.
• The style.something approaches introduce a new binding command which is only used for style attributes. What's nice about this is we think devs will assume that the behavior here is the style.something attribute will overwrite the native style attribute and won't attempt to put style.something=... and style=... on the same element.
• Both approaches require aurelia to log a warning about Internet Explorer incompatibility when someone puts an interpolation expression in the native style attribute.

from binding.

If I understand correctly, in IE (which is still the most common browser inside enterprises) the only option to bind styles is to set the full style property? That's very annoying, especially for something as useful and common as style (think about dynamic layouts or transforms, data visualizations that bind to the size or color or opacity, etc.).

@jdanyow suggestion to use style.background-color.bind='xx' feels very natural and hardly "new syntax". After all backgroundColor is a property of the style object.

from binding.

Hi guys,

I have an element like the one below

innerHTML.bind="filler(col, item)"

I need to be able to bind the raw HTML returned. Example

    this.renders["check"] = function(col, item){
        return '<input type="inpute" value.two-way=`${hola}`/>';
    };

How can I accomplish that?

Thanks.

from binding.

was this solved, I need to do 👍
< option repeat.for="colour of typeColours" css="color: #333333; background-color:${colour};">

for a multi coloured select drop down. It works in Chrome but not in IE.
I've tried various things from this issue post but nothing works.
Any help much appreciated.
Cheers!
Rob

from binding.

<div css="padding-left: ${depth * 20}px">...</div> does not seem to work -- no style attribute is emitted on the element at all. Suggestions?

from binding.