使用Knockout js添加和删除嵌套的Json数据(Adding and deleting nested Json data with Knockout js)

使用Knockout js添加和删除嵌套的Json数据(Adding and deleting nested Json data with Knockout js)

我在添加和删除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 }

正如你可以看到有一些链接，我不能添加或删除新的链接。

我像这样配置了knockout：

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/

I have a problem with adding and deleting Json data.

First I get a model from server then convert it into JSON data. And need add or delete json data.

Here is my json data:

{ "$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 }

As you can see there are some links and I could not add or delete new links.

I configured knockout like this:

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

But it does not work. How can I configure the knockout to fix it?

Thank you in advance. https://jsfiddle.net/pa3zcvae/

最满意答案

我在这里工作： 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); });

I got it working here: https://jsfiddle.net/pa3zcvae/1/

You almost had it. What you have makes sense, but it was not playing nice with the mapping plugin. When I used your addLink method, the new links were a different type of object then the existing mapped objects. The solution is actually simpler than you would expect, as knockout automagically takes care of all the work.

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