如何通过 KNOCKOUT 中的数据绑定值更改 css 中规则的值？

Question

我有一个加载栏显示项目的进度，项目已经完成了多少，栏的宽度是用 css 样式和宽度属性静态完成的，在这里是代码：

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

我想通过数据绑定属性动态更改宽度，我该怎么做？

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 值的 ' 才能正确设置

Answer 2

为了使用 Knockout 动态设置样式，我们通常不再使用样式绑定，同样地，我们也不再使用样式属性。在 Knockout 文档中，查看 Knockout CSS binding.

在您的模型上创建一个 Knockout observable 或 Knockout computed observable，然后使用 CSS 绑定，取消对该 observable 的引用。您的可观察对象应该存储或计算应该附加到您的元素的 CSS class，并且只是 return 表示 class 名称的字符串。

然后走到一边，写下你的 CSS class 或 classes.

如何通过 KNOCKOUT 中的数据绑定值更改 css 中规则的值？

How to change the value of a rule in css by data binding value in KNOCKOUT?

javascript

mvvm

knockout.js

durandal