Components - 设置组件的样式宽度

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属性的style属性

和 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 钩子起作用了（我的意思是设置宽度），但我想做（并学习）如何用正常方法做到这一点——就像绑定 aria-values 和百分比一样。

将宽度设置为百分比不起作用 - 要么因为它不在样式属性中，要么因为它不是百分比。我如何使用以下逻辑（或类似逻辑）绑定属性：

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

注释行都不起作用：第一个错误未定义不是函数（对于 get），第二个错误将宽度设置为 "percent%"，第三个错误 'percent is not defined'。 ..

我能想到的唯一解决方法是使用路由模型来 return 额外数据，基本上是添加一个新属性：

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

Answer 1

您尝试定义 someString 没有成功，因为它们是在定义组件时设置的，而不是在运行时设置的。将其更改为计算属性:

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

将 someString 定义为属性，它取决于 percent 的值。当 percent 改变时，someString.

也会改变

Components - 设置组件的样式宽度

Components - set style width of component

ember.js