淘汰赛：将项目添加到分层 json 的地图中

Question

我正在尝试 Knockout 映射，并想知道是否可以将项目插入到分层 json 模型的子级别中。

使用类似这样的 Json，我可以将项目添加到子级别吗？加个苹果？

var food = [ 
{foodGroupName: "Fruits", subGroups: [
    {subGroupName: "Apples", values: [    
        {"mytitle":"Granny Apple","mycaption":"Muffin sweet roll marshmallow."},
        {"mytitle":"Green Apple","mycaption":"Jelly beans sugar plum lemon drops."},
        {"mytitle":"Crab Apple","mycaption":"Sesame snaps gingerbread pudding cupcake."}
    ]},
    {subGroupName: "Oranges", values: [   
        {"mytitle":"Navel Orange","mycaption":"Muffin sweet roll marshmallow."},
        {"mytitle":"Blood Orange","mycaption":"Jelly beans sugar plum lemon drops."},
        {"mytitle":"Mandarin Orange","mycaption":"Sesame snaps gingerbread pudding cupcake."},
        {"mytitle":"Clementine","mycaption":"Pudding jelly-o dessert soufflé."}
    ]}
]
},
{foodGroupName: "Vegetables", subGroups: []},
{foodGroupName: "Proteins", subGroups: []}

];

我整理了一个 Fiddle：http://jsfiddle.net/e7bmt74b/5/

我想让“Add New”按钮添加一种新类型的苹果，并将其添加到 Json 中，如 textarea 所示。

Answer 1

您应该认真考虑重组数据。现在插入苹果并不容易，因为您需要获取数组的第一项（恰好是水果部分），然后插入正确的子组（恰好是第一个子组）。

this.addApple = function() {
    self.foods()[0].subGroups()[0].values.push({
        mytitle: ko.observable('New Apple Title'),
        mycaption: ko.observable('New Apple Caption'),
    });
};

JSFiddle

我注意到您正在使用映射插件。虽然在某些情况下很好，但我建议不要一开始就使用它。它实际上使这样的事情变得更加困难。花点时间建立一些好的领域模型。理想情况下，您应该拥有更多类似的东西。

this.addApple = function () {
    self.fruits().apples.push(new Apple());
};

或者更好的是，让“水果”对象处理它。

this.addApple = function () {
    self.fruits.addApple();
};

tl;dr：这不是微不足道的，因为您的数据结构很复杂。