Question

我在添加和删除Json数据时遇到问题。

首先，我从服务器获取模型，然后将其转换为JSON数据。并且需要添加或删除json数据。

这是我的json数据：

{
        "$id": "1",
        "Number": "000100029304",
        "Title": "Test Title",
        "Status": "Ready",
        "StatusDate": null,
        "Author": null,
        "UpdatedDate": "2012-12-12T12:12:12",
        "Comments": "test comment",

        "Type": {
            "$id": "2",
            "Title": "Type #1",
            "UpdatedDate": "2011-11-11T11:1:11",
            "Name": "AAA",
            "Documents": [
              {
                  "$ref": "1"
              }
            ],
            "ID": 100
        },
        "DocOwner": {
            "$id": "3",
            "Name": "CEO",
            "Title": "General Director",
            "Documents": [
              {
                  "$ref": "1"
              }
            ],
            "ID": 1
        },

        "Links": [
          {
              "$id": "4",
              "DocumentId": 1234,
              "Name": "Some file1.xls",
              "Path": "\\\\mycomp\\folder\\Some file1.xls",
              "Type": 0,
              "Document": {
                  "$ref": "1"
              },
              "ID": 200
          },
          {
              "$id": "5",
              "DocumentId": 1234,
              "Name": "Some file2.xls",
              "Path": "\\\\mycomp\\folder\\Some file2.xls",
              "Type": 0,
              "Document": {
                  "$ref": "1"
              },
              "ID": 201
          },
          {
              "$id": "6",
              "DocumentId": 1234,
              "Name": "Some file3.xls",
              "Path": "\\\\mycomp\\folder\\Some file3.xls",
              "Type": 0,
              "Document": {
                  "$ref": "1"
              },
              "ID": 202
          },
        ],
        "ID": 1234
    }

正如您所看到的，有一些链接，我无法添加或删除新链接。

我像这样配置了淘汰赛：

 var Link = function (data) {
        var self = this;
        if (data != null) {
            ko.mapping.fromJS(data, {}, self);
        } else {
            self.ID = ko.observable();
            self.DocumentId = ko.observable();
            self.Name = ko.observable();
            self.Path = ko.observable();
            self.Type = ko.observable();
            self.Document = ko.observableArray();
        }

    }
    var DocViewModel = function (data) {
        var self = this;
        self.doc = dataModel;
        //if (data != null) {
        //    ko.mapping.fromJS(data, { Links: linkMapping }, self);
        //} else {
        //    self.doc.Links = ko.observableArray();
        //}
        self.addLink = function () {

            self.doc.Links.push(new Link({
                ID: null,
                DocumentId: null,
                Name: "New link",
                Path: null,
                Type: null,
                Document: null
            }));

        }
        self.removeLink = function (Link) {
            self.doc.Links.remove(Link);
        }

        self.saveJson = function () {
            var myJson = ko.mapping.toJSON(self);
            $("#txt").val(myJson);
        }
    }
    var linkMapping = {
        create: function (options) {
            return new Link(options.data);
        }
    }
    $(document).ready(function () {
        var viewModel = new DocViewModel();
        ko.applyBindings(viewModel);

    });

但它不起作用。如何配置淘汰赛来修复它？

提前谢谢你。 https://jsfiddle.net/pa3zcvae/

Answer 1

我在这里工作：https://jsfiddle.net/pa3zcvae/1/

你几乎拥有它。你有什么意义，但它与映射插件并没有很好的结合。当我使用addLink方法时，新链接是与现有映射对象不同的对象类型。解决方案实际上比您预期的更简单，因为淘汰赛会自动完成所有工作。

var Link = {
  ID: ko.observable(),
  DocumentId: ko.observable(),
  Name: ko.observable(),
  Path: ko.observable(),
  Type: ko.observable(),
  Document: ko.observableArray()
}

var DocViewModel = function(data) {
  var self = this;
  self.doc = dataModel;
  self.doc.Links = ko.mapping.fromJS(self.doc.Links);

  self.addLink = function() {
    var link = {
      ID: null,
      DocumentId: null,
      Name: "New link",
      Path: null,
      Type: null,
      Document: null
    };
    self.doc.Links.push(link);
  }

  self.removeLink = function(Link) {
     self.doc.Links.remove(Link);
  }

  self.saveJson = function() {
     var myJson = ko.mapping.toJSON(self);
     $("#txt").val(myJson);
  }
}

$(document).ready(function () {
    var viewModel = new DocViewModel();
    ko.applyBindings(viewModel);
});

使用Knockout js添加和删除嵌套的Json数据

1 个答案: