使用Knockout添加和刪除嵌套的Json數據js

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); 
});