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

但我不能将％（基于百分比属性）的宽度绑定到style属性。现在，didinsertelement钩子工作（我的意思是设置宽度），但我想（并学习）如何使用常规方法执行此操作 - 就像绑定aria-values和百分比一样。

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

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

两条注释行都不起作用：第一个错误未定义不是函数（对于get），第二个将宽度设置为＆＃34; %%＆＃34;，第三个错误＆＃39 ;％未定义＆＃39; ...

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

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

Answer 1

您定义someString的尝试不起作用，因为它们是在定义组件时设置的，而不是在运行时设置的。将其更改为计算属性：

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

将someString定义为取决于percent值的属性。当percent发生变化时，someString也会发生变化。

组件 - 设置组件的样式宽度

1 个答案: