[feature request] styleBinding in Views

[adamjmurray]

See an example of what I am trying to do here: http://jsfiddle.net/wcLPa/3/

This can be streamlined, and remove an unnecessary div tag, if I could do it this way instead:

{{#view App.View styleBinding="style"}} Color is {{App.controller.color}} {{/view}}

I think this feature would greatly complement classBinding. We can use CSS classes to define static styling rules, and styleBinding for styles that dynamically change based on bindings.

[ef4]

You can already do this with "attributeBindings": http://jsfiddle.net/py8Vk/1/

[adamjmurray]

Thanks for that.

Then I think the real issue here is lack of documentation for SC2. I am new to SproutCore, and trying to avoid SC1 documentation since so much has changed for SC2. I couldn't find any mention of this "attributeBindings" feature in the guides or even the API documentation (http://docs.sproutcore20.com/#doc=SC.View&src=false)

I'd say once this gets documented, then this issue can be closed.

Also, I found a problem when trying to use multiple {{bindAttr}}s in a single HTML tag (for example, with class and style). Only the first one will update dynamically. The rest seem to get permanently cached. I was going to file a bug about that, but maybe the answer is "don't do that, use attributeBindings"? So let me know if that's the case or if I should file a bug...

[ef4]

You can put multiple attributes within a single bindattr block, and they should all sync.

I agree on the need for documentation. I'm a beginner myself, but I've spent enough time down in the source to pick up some of these things. SC2 is still a moving target, as it should be at this point.

[wagenet]

Since we'll be making a separate concerted effort to build out the docs I'm going to close this issue. If, once improved docs are released you still find problems, please do file issues.

[evilmarty]

I think there is real use with supporting styleBindings. It seems kind of redundant that if you want to update (ie. width) you need to set up an attribute binding which sets the style which the browser's renderer parses the style attribute, updates the element and style object. This issue gets tough to manage when you want to update multiple styles, which would require a specific style property on the view to aggregate all the styles that you want to update. I don't know how much of a performance difference this is and whether that makes supporting this feature that much more appealing. I just think that if Ember supports attributes and classes, why not styles?

I'm not advocating that views should contract their own styles etc. I'm just throwing my two cents because I recently used Ember for an app where I needed to display a progress bar and I needed to update the width by percentage. I used a style attribute but felt like a code smell because I had my view generate CSS.

[cowboyd]

Agree, what you really want is the ability to bind individual css properties to a property of the view, without having to jump through the hoop of generating a valid style string. The api would be similar to the way you can bind classNames. E.g.

styleBindings: ['backgroundColor', 'zIndex', 'height:mySpecialHeightProperty']

As opposed to:

attributeBindings: ['style'],
style: Em.computed('backgroundColor', 'zIndex', 'mySpecialHeightProperty', function() {
  return "background-color:"+ this.get('backgroundColor' +
    ";z-index:" + this.get('zIndex') +
    ";height:" + this.get('mySpecialHeightProperty') + "px;"
})

It would be a privilege to contribute this if it was likely to be accepted.

[stefanpenner]

seems like a good addon