組件 - 組件

Question

的設置樣式寬度我無法弄清楚如何做一些東西與組件，即：

這是從DOM工作呈現進度條的例子：

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

這是我得到的DOM，從組件渲染（不去管屬性的值）：

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

差異與問題：擁有width屬性的樣式屬性。

而且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') + '%'); 
    } 
}); 

，但我不能綁定以％寬度，基於百分比屬性，到樣式屬性。 現在，didinsertelement掛鉤工作（我的意思是設置寬度），但我想要做的（並學習）如何用正常的方法做到這一點 - 就像綁定詠歎調值和百分比。

將寬度設置爲百分比不起作用 - 或者因爲它不在style屬性中，或者因爲它不是百分比。我怎麼能結合具有以下邏輯（或類似）的屬性：

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

既不註釋行的工作：未定義的第一個的錯誤是不是一個功能（GET），第二個設置寬度，以「百分比％」，以及「沒有定義％的」第三個錯誤...

我能想到的是使用路由模式返回額外的數據，基本上添加新屬性的唯一的解決方法：

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

Answer 1

您嘗試定義someString未奏效，因爲使用它們是在定義組件時設置的，而不是在運行時。將其更改爲一個計算性能：

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

這someString定義爲一個依賴於percent值的屬性。當percent發生變化時，someString也發生變化。