进度条值未使用 Knockout.js 绑定到数据绑定值属性

Question

我有一个进度条，我添加了一个条件，如果值低于100，颜色应该是红色；如果它是 100，颜色应该变成绿色。但是，当我调试代码时，我看到进度值 return 0，即使某些值已分配给 value 属性。

下面是进度条码，我在 data-bind 属性中赋值 100。

<div class="card-header float-right" style="width:50%; padding-left:100px;">
  <progress id="myProgress" data-bind="attr: { value: 100, }" min="0" max="100"></progress>
</div>

下面是javascript代码；当我调试和检查进度值时，它显示 0.

$(document).ready(function () {
    var progressvalue = $("#myProgress").val();
    var progressText = $("#myProgress").text();
    if (progressvalue == 100) {
        $('#myProgress').addClass("progress-100");
        $('#myProgress').removeClass("progress-below");
    }
    else {
        $('#myProgress').addClass("progress-below");
        $('#myProgress').removeClass("progress-100");
    }
});

Answer 1

根据我在您当前代码中看到的内容，您不需要 data-bind 属性（尽管您可能有超出所显示内容的原因）。 编辑： 对于 Knockout.js，您当然需要 data-bind 属性。

您需要做的就是为您的<progress> element, and then make sure you're updating it as whatever process it represents is progressing设置一个value。

<progress id="myProgress" value="10" max="100"></progress>

编辑： 对于 Knockout.js, you need to tie your data-bind attributes to a ViewModel 字段，ViewModel 字段需要与 Observable 相关联。

你可以做这样的事情（一个玩具示例，每秒将进度值递增 10，但展示了如何更新 ViewModel，以及如何在达到阈值后触发 class 更改值):

<div class="card-header float-right" style="width:50% ; padding-left:100px">
<progress
      id="myProgress"
      data-bind="value: progressValue, class: progressClass"
      max="100"
></progress>
</div>

<script>
      const INITIAL_PROGRESS = 1;
      const PROGRESS_THRESHOLD = 90;
      const BELOW_THRESHOLD_CLASS = "progress-below";
      const ABOVE_THRESHOLD_CLASS = "progress-100";

      let progressViewModel = {
        progressValue: ko.observable(INITIAL_PROGRESS),
        progressClass: ko.observable(BELOW_THRESHOLD_CLASS)
      };

      ko.applyBindings(
        progressViewModel,
        document.getElementById("myProgress")
      );

      ko.when(
        function() {
          return progressViewModel.progressValue() > PROGRESS_THRESHOLD;
        },
        function(result) {
          progressViewModel.progressClass(ABOVE_THRESHOLD_CLASS);
        }
      );

      for (let i = 1; i < 11; i++) {
        window.setTimeout(function() {
          progressViewModel.progressValue(i * 10);
        }, i * 1000);
      }

</script>

然后你必须弄清楚你希望如何更新你的 Observable 值。

Answer 2

如果您使用的是 KnockoutJS，实际进度可能会在您的视图模型上观察到属性。假设它实际上被称为 progress，那么您将像这样绑定到它：

<div class="card-header float-right" style="width:50% ; padding-left:100px">
    <progress id="myProgress" data-bind="attr: { value: progress }" min="0" max="100"></progress>
</div>

对于样式，您应该根据进度使用 css 或 class 绑定将 class 分配给进度条。这是一个带有小示例的 Fiddle，尽管我使用了 Bootstrap 进度元素而不是实际的本机进度元素，因为它是样式的噩梦：https://jsfiddle.net/thebluenile/20zsqn5w/

进度条值未使用 Knockout.js 绑定到数据绑定值属性

Progress bar value not bound to data-bind value attribute using Knockout.js

javascript

jquery

knockout.js