Question

我正在尝试使用knockout来查看我上传文档和显示列表的视图。为此，我使用jquery.form.js以使用ajax上传它们。我已将其更改为使用knockout并且我的viewmodel看起来像这样

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数据时我陷入困境。结果是正确的，我在第一次加载时收到的格式相同但我不知道如何“刷新”viewmodel以使用这个新列表。

不知道使用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);
  });
};

通过ajax上传文档时更新knockout viewmodel

1 个答案: