通过 ajax 上传文档时更新淘汰视图模型

Question

我正在尝试将敲除用于上传文档并显示列表的视图。为此，我使用 jquery.form.js 来使用 ajax 上传它们。我已将其更改为使用淘汰赛，我的视图模型看起来像这样

var ViewModel = function (groups) {
    var self = this;

    self.groups = ko.observableArray(ko.utils.arrayMap(groups, function (group) {
        return {
            planName: ko.observable(group.Key),
            documentList: ko.observableArray(ko.utils.arrayMap(group.Values, function (value) {
                return {
                    document: ko.observable(new Document(value))
                };
            }))
        };
    }));

    var options = {
        dataType: 'json',
        success: submissionSuccess
    };

    self.add = function () {
        $('#addForm').ajaxSubmit(options);
        return false;
    };

    function submissionSuccess(result) {
        alert('success');
    }
};

拥有一个 Document 函数来进行映射。从控制器接收 Json 数据时我被卡住了。结果是正确的，我在第一次加载时收到的格式相同的对象列表，但我不知道如何“刷新”视图模型以使用这个新列表。

不知道使用ko映射插件是否会更容易，因为我从未使用过它，甚至不知道它是否适用于此。

控制器方法，如果相关的话，是这样的（如果有其他需要，请告诉我，尽管在接下来的几个小时内将无法访问代码）

[HttpPost]
public ActionResult AddDocument(AddDocumentViewModel viewModel)
{
    var partyId = Utils.GetSessionPartyId();

    if (viewModel.File.ContentLength > Utils.GetKBMaxFileSize * 1024)
        ModelState.AddModelError("File", String.Format("The file exceeds the limit of {0} KB", Utils.GetKBMaxFileSize));

    if (ModelState.IsValid)
    {
        _documentsManager.AddDocument(viewModel, partyId);

        if (Request.IsAjaxRequest())
        {
            var vm = _displayBuilder.Build(partyId);
            return Json(vm.Documents);
        }

        return RedirectToAction("Index");
    }

    var newViewModel = _createBuilder.Rebuild(viewModel, partyId);
    return PartialView("_AddDocument", newViewModel);

}

谢谢

编辑：我想出了这个似乎可以工作的代码（这个函数在 ViewModel 一内

function submissionSuccess(result) {
    self.groups(ko.utils.arrayMap(result, function (group) {
        return {
            planName: ko.observable(group.Key),
            documentList: ko.utils.arrayMap(group.Values, function (value) {
                return {
                    document: new Document(value)
                };
            })
        };
    }));
};

Answer 1

您确定documentList 和document 本身需要成为可观察对象吗？

要更新列表，您可以像在常规数组上一样将其推送到该列表。 你可以试试这样的：

function submissionSuccess(result) {
  self.groups.removeAll();

  $.each(result, function(index, value) {
    var documentList = [];

    $.each(value.Values, function(index, value) {
      documentList.push(new Document(value));
    });

    var group = {
      planName:value.Key,
      documentList: documentList
    };

    self.groups.push(group);
  });
};