javascript - 如何通过KNOCKOUT中的数据绑定(bind)值更改css中规则的值？

Question

我有一个加载栏，显示项目的进度，即项目已完成多少，栏的宽度是通过 css 样式和 width 属性静态完成的，代码如下:

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">

我想使用数据绑定(bind)属性动态更改宽度，我该怎么做？

Answer 1

如果“width”是模型属性，则

<div class="progress-bar"
   role="progressbar"
   aria-valuemin="0"
   aria-valuemax="100"
   data-bind="
       style: { width: width + '%' },
       attr: {'aria-valuenow' : width + '%'}">

有关更多详细信息，请查看 style binding文章。

请注意，更改 aria-valuenow 属性是有意义的，这需要正确设置 Knockout 值周围的 '