Question

我有以下视图模型

public class CoreSkillsViewModel
{
    public int CoreSkillsId { get; set; }
    public string SkillName { get; set; }
    public double Competency { get; set; }
    public bool IsCoreSkill { get; set; }
}

通过ajax调用返回到我的Index.cshtml页面....

 <script type="text/javascript">
        $(function () {
            var employeeId = @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: '@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);
        });

我可以在控制台中看到以下数据：[{＆＃34; CoreSkillsId＆＃34;：1，＆＃34; SkillName＆＃34;：＆＃34; Test Skill 1＆＃34;，＆＃34 ;能力＆＃34;：22.65＆＃34; IsCoreSkill＆＃34;：真}]

我正在使用淘汰赛，我有一个foreach循环......

<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" aria-valuenow="16.67" aria-valuemin="0" aria-valuemax="100" style="width: 16.67%;">
      <span style="color: #000;">16.67 %</span>
      </div>
      </div>
    </td>
  </tr>
</tbody>

现在我在aria-valuenow，width和text属性中有16.67的硬编码值。这显示正常，但我希望这是动态的，模型的价值已经到位，但我无法直接绑定到这些属性。

知道怎么做吗？

例如：aria-valuenow =＆＃34; data-bind =＆＃39; text：Competency＆＃39;＆＃34;

使用knockout中的值设置bootstrap进度条属性

0 个答案: