Search code examples
javascriptmvvmknockout.jsdurandal

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

I have a loading bar which shows the progress of the project that how much the project has been completed, the width of the bar is statically done with css styling and width property, here is the code:

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

I want to change the width, dynamically with data-bind attribute, How can I do this?

Solution

  • If 'width' is a model property, then

    <div class="progress-bar"
   role="progressbar"
   aria-valuemin="0"
   aria-valuemax="100"
   data-bind="
       style: { width: width + '%' },
       attr: {'aria-valuenow' : width + '%'}">

    For more details check the style binding article.

    Note that it makes sense to change the aria-valuenow attribute, which requires the ' around the value for Knockout to set correctly