CODEWITHSUNDEEP
ember.js
Dejan Biljecki
Dejan Biljecki

Reputation: 605

Components - set style width of component

I can't figure out how to do some stuff with the components, ie:

This is an example of a working rendered progress bar from the dom:

<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25" aria-valuenow="25" style="width: 25%;">25%</div>

This is what I get in the dom, rendered from the component (never mind the values of attributes): 

<div id="ember294" class="ember-view progress-bar bg-color-teal" aria-valuetransitiongoal="77" aria-valuenow="77" width="25">
    25%
</div>

Difference and problem: the style attribute that holds a width attribute.

And the component.js:

App.ProgBarComponent = Ember.Component.extend({

    classNames: ['progress-bar', 'bg-color-teal'],
    attributeBindings: ['aria-valuetransitiongoal:aria-valuetransitiongoal', 'aria-valuenow:aria-valuenow', 'percent:width'],

    didInsertElement: function () {
        //$('#' + this.elementId).css('width', this.get('percent') + '%');
    }
});

But I cant bind the width in %, based on the percent attribute, to the style attribute. Now, the didinsertelement hook works (I mean setting the width), but I want to do (and learn) how to do this with a normal approach - just like binding the aria-values and percent.

Setting the width to percent does not work - either because it is not in the style attribute, or because it is not in percent. How could I bind an attribute with the following logic (or similar):

 attributeBindings: ['someString:style'],
//someString: 'width:' + this.get('percent') + '%'
//someString: 'width:' + ['percent'] + '%'
//someString: 'width:' + percent + '%'

Neither of the commented lines work : the first one errors undefined is not a function (for get), the second one sets the width to "percent%", and the third one errors 'percent is not defined'...

The only workaround I could think of is using the routes model to return extra data, basically adding a new attribute:

styleString = 'width: ' + percent + '%';

Upvotes: 0

Views: 2880

Answers (1)

Buck Doyle
Buck Doyle

Reputation: 6397

Your attempts to define someString didn’t work because they’re set when the component is defined, rather than at runtime. Change it to a computed property:

someString: function() {
  return "width: " + this.get('percent') + "%";
}.property('percent')

That defines someString as a property that depends on the value of percent. When percent changes, so does someString.

Upvotes: 2

Related Questions