使用Knockout.js進度欄值未綁定到數據綁定值屬性

Question

我有一個進度條，並且添加了一個條件，如果該值小於100，則顏色應為紅色； 如果是100，則顏色應變為綠色。 但是，當我調試代碼時，即使將某些值分配給value屬性，我也會看到進度值返回0。

以下是進度條碼，我在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>元素設置一個value ，然后確保在它表示正在進行的任何過程中都對其進行更新。

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

編輯：對於Knockout.js ，您需要將data-bind屬性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>

然后，您必須弄清楚如何更新可觀測值。

Answer 2

如果您使用的是KnockoutJS，則實際進度可能是viewmodel上的一個可觀察屬性。 假設它實際上稱為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綁定根據進度將類分配給進度欄。 這是一個小提琴，上面有一個小例子，盡管我使用了Bootstrap進度元素而不是實際的本機進度元素，因為這是樣式的噩夢： https : //jsfiddle.net/thebluenile/20zsqn5w/