http://stackoverflow.com/questions/42794185/set-bootstrap-progress-bar-property-with-value-from-knockout

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<table>
  <tbody data-bind="foreach: CoreSkillsArray">
  <tr>
    <td>
      <input type="hidden" data-bind="value: CoreSkillsId, visible: false" />
      <span data-bind="text: SkillName"></span>
    </td>
    <td>
      <div class="progress " style="height: 20px;">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" data-bind="attr: { 'aria-valuenow': Competency() + '%' }, width: Competency" aria-valuemin="0" aria-valuemax="100">
      <span style="color: #000;">16.67 %</span>
      </div>
      </div>
    </td>
  </tr>
</tbody>
</table>

JavaScript

var employeeId = -1; //@ViewBag.UserInfo.UserId;

function CoreSkillsViewModel() {
  var self = this;

  // Core Skill
  self.CoreSkillsId = ko.observable("");
  self.SkillName = ko.observable("");
  self.Competency = ko.observable("");
  self.IsCoreSkill = ko.observable("");

  var CoreSkill = {
    CoreSkillsId: self.CoreSkillsId,
    SkillName: self.SkillName,
    Competency: self.Competency,
    IsCoreSkill: self.IsCoreSkill
  };

  self.CoreSkill = ko.observable();
  self.CoreSkillsArray = ko.observableArray();

  $.ajax({
    url: '/echo/json' //@Url.Action("GetSkills", "CoreSkills")',
    cache: false,
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: ko.toJSON({ 'UserId' : employeeId }),
    success: function (data) {
      self.CoreSkillsArray(data); // Put the response in ObservableArray
      console.log(ko.toJSON(self.CoreSkillsArray));
    }
  });

}

var viewModel = new CoreSkillsViewModel();
ko.applyBindings(viewModel);