Style properties

[jrmyio]

When working with ampersand-dom-bindings I came accros an issue where I want to change the width of a block element. I had to generate a style like string "width: " + percentage + "%;" to tackle the use case. It would be handy to have ampersand-dom-bindings to also be able to change CSS aka Style properties directly.

I am not sure if this should be covered in the ampersand-dom repo.

[legastero]

Worth double checking that this still works, and updating docs if so: https://github.com/henrikjoreteg/bind-transforms

[wraithgar]

+1 this probably needs to be done at least to match class bindings, i.e. style, booleanStyle, switchStyle

[herkyl]

+1 I run across the same issue, needing to set the width & left of an element using bindings

[pgilad]

@legastero @wraithgar @ConneXNL @herkyl
Will an optional transform function be sufficient? That way you can manipulate the outcome itself and do whatever you want with it.

[herkyl]

@pgilad could you give a code example of what exactly you are thinking of

[pgilad]

// Use as a regular binding
var bindings = domBindings({
    'model.name': {
        type: 'text',
        selector: '.any-selector',
        transform: function(value, binding) {
          return value + '%';
        }
    }
});

[herkyl]

    'model.width': {
        cssProp: 'width',
        selector: '.any-selector',
        transform: function(value, binding) {
          return value + 'px';
        }
    }

What about something like this?

[pgilad]

I was suggesting a transform function that will be run (if defined) before applying the value to whatever the binding type is.
I think we're talking about different problems...