ajax调用后更新knockout viewmodel

时间:2017-01-23 22:40:47

标签: javascript knockout.js viewmodel

我在使用KnockoutJS将更改保存回我的可观察视图模型时遇到问题。为了保持这个简单,我将只展示基础....我的viewmodel有一个名为EmployeeSkill的类,它有两个属性,EmployeeSkillsViewModel是一个包含零到多个这些技能的数组,如下面的Index.cshtml页面所示。我有一个变量:ctrl,它保存对按钮旁边的输入控件的引用我单击打开一个模式对话框,允许用户在其输入控件中输入现有的OR新值。单击保存按钮时,将检查或更新数据库并返回整数值。我想将此返回值保存到我的模型中。

viewmodel填充了JSON,如下所示:

[{“EmployeeSkillId”:1,“SkillsId”:999},{“EmployeeSkillId”:2,“SkillsId”:777},{“EmployeeSkillId”:3,“SkillsId”:888}]

<script type="text/javascript">
  var ctrl;

  $(document).on("click", ".open-editSkillName", function () {
    ctrl = $(this).closest('.input-group').find('input');
    $(".modal-body #edit_skill_name").val($(this).closest('.input-group').find('input').val());
  });

  $(function () {
     function EmployeeSkillsViewModel() {
       var self = this;
       self.EmployeeSkillId = ko.observable("");
       self.SkillsId = ko.observable("");

       var EmployeeSkill = {
         EmployeeSkillId: self.EmployeeSkillId,
         SkillsId: self.SkillsId,
       };

       self.EmployeeSkill = ko.observable();
       self.EmployeeSkillsArray = ko.observableArray();

       self.updateSkillName = function (ctrl) {
         var skillName = $(".modal-body #edit_skill_name").val();

         $(ctrl).val(skillName);

         // Check to see if this skill exists...
         $.ajax({
             url: '@Url.Action("UpsertSkill", "EmployeeSkills")',
             cache: false,
             type: 'POST',
             contentType: 'application/json; charset=utf-8',
             data: ko.toJSON({ 'skillName': skillName }),
             success: function (data) {
                 // alert(data.SkillsId) --> alerts expected int value
                 self.SkillsId(data.SkillsId);
                 ko.applyBindings(self.EmployeeSkillsArray);
             }
           }).fail(function (xhr, textStatus, err) {
             alert(err);
           });
        }

    var viewModel = new EmployeeSkillsViewModel();
    ko.applyBindings(viewModel);
  });
</script>

我有一个模态弹出窗口,允许用户在输入中输入一个值,当他们点击btnSaveSkillName时,函数updateSkillName(上面)被调用

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="close-editSkillName btn btn-primary" data-dismiss="modal" id="btnSaveSkillName" data-bind="click: $root.updateSkillName(ctrl)">Update Skill Name</button>
</div>

我将skillName属性中的此值传递给我的控制器,并在我的响应中返回一个整数值,其中输入的技能名称为id。我想用这个新的整数值更新底层视图模型的行,但我找不到一个简单的方法。

0 个答案:

没有答案