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

Question

I have a progress bar, and I added a condition that, if the value is below 100, the color should be red; and if it is 100, the color should change to green. But when I debug the code I see the progress value return 0 even if some value is assigned to value attribute.

Below is the progress bar code, and I am assigning value 100 within the data-bind attribute.

 <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> 

Below is the javascript code; when I debug and check progress value, it displays 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

You do not need the data-bind attribute from what I can see in your current code (though you may have a reason outside of what you've shown). Edit: For Knockout.js, you will of course need the data-bind attribute.

All you need to do is set a value for your <progress> element, and then make sure you're updating it as whatever process it represents is progressing .

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

Edit: For Knockout.js , you need to tie your data-bind attributes to a ViewModel field, and that ViewModel field would need to be associated with an Observable.

You could do something like this (a toy example that just increments the progress value by 10 each second, but shows how you could update your ViewModel, as well as trigger a class change after reaching a threshold value):

<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>

Then you have to figure out how you want your Observable value(s) updated.

Answer 2

If you're using KnockoutJS, the actual progress is probably an observable property on your viewmodel. Let's say it is actually called progress , then you would bind to it like this:

<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>

For styling, you should use the css or class bindings to assign a class to the progress bar, based on the progress. Here's a Fiddle with a little example, although I've used the Bootstrap progress element and not the actual native progress element since it's a nightmare to style: https://jsfiddle.net/thebluenile/20zsqn5w/