时间戳

首页 > 解决方案 > 进度条值未绑定到使用 Knockout.js 的数据绑定值属性

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

问题描述

我有一个进度条，我添加了一个条件，如果值低于 100，颜色应该是红色；如果是 100，颜色应该变成绿色。但是当我调试代码时，我看到进度值返回 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");
    }
});

标签： javascriptjqueryknockout.js

解决方案

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

您需要做的就是value为您的<progress>元素设置 a，然后确保您正在更新它，因为它代表的任何进程都在进行中。

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

编辑： 对于Knockout.js，您需要将data-bind属性绑定到ViewModel字段，并且该 ViewModel 字段需要与 Observable 关联。

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

<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 值如何更新。

推荐阅读