Javascript 如何向淘汰映射视图模型添加内容？

我是敲除新手，在使用敲除映射插件时，我很难理解如何“编辑”视图模型。希望有人能帮我。我有一份清单。下面是一个类似的例子。基本上是多个组和多个文件

[
    {
        "group": "Alice",
        "files": [
            {"filename": "red.mp3", "length": 5},
            {"filename": "blue.mp3","length": 6},
            {"filename": "yellow.mp3","length": 5}
        ]
    },
    {
        "group": "Bob",
        "files": [
            {"filename": "green.mp3","length": 2},
            {"filename": "purple.mp3","length": 10}
        ]
    }
]

我可以从中得到基本模型：

$.getJSON('api/get-list', function(data)
    {
        view = ko.mapping.fromJS(data);
        ko.applyBindings(view);
    });

它可以工作，我已经设法将它绑定到HTML中，因此它是可见的，并且在该区域一切正常。但是，我需要补充一些东西，我不知道该怎么做。更重要的是，如何干净利落地做好这件事

我用一个复选框输出文件，我想要一个“select”属性绑定到它。我已经能够通过在后端添加字段来实现这一点，但我不希望这样，因为它真的不应该存在。还需要显示当前选择的数量、数量、每组和总数

所以，基本上我想要这样的东西：

{
    "formSubmit": ?,
    "totalNumberOfFiles": ?,
    "totalNumberOfSelectedFiles": ?,
    "groups": 
    [
        {
            "group": "Alice",
            "numberOfFiles": ?,
            "selectedFiles": ?,
            "files": [
                {
                    "filename": "red.mp3",
                    "length": 5,
                    "selected": boolean
                },
                ...
            ]
        },
        ...
    ]
}

• 尽管，例如，

  numberOfFiles

  可能甚至不需要？可以从

  文件中获取。长度
  还是什么

• 而

  selectedFiles

  应该是一个计算所选文件数量的函数/可观察的函数（看起来如何？），还是应该是一个以某种方式添加到列表中或从列表中删除的列表（以及如何做到这一点？）
• 在submit函数中，我如何获得当前选定文件的列表，以便将它们发布回服务器
• 不管怎样，我如何用这些东西“增强/丰富/包装”我从服务器获得的基本阵列，而不是以一种不太混乱的方式

基本上，我知道（可以想出）当模型工作时如何进行绑定，但不知道在使用映射插件时如何以良好的方式构建它（我真的不想手动进行）

---

希望有人能帮助我，因为当你使用ko.mapping.fromJS时，我无法理解这一点，每个属性都转换为可观察属性，每个数组都转换为可观察数组

主视图模型，MyViewModel有一个文件组列表，该文件组由使用自定义映射对象的映射初始化。此对象有一个“创建”回调（如中所述），用于实例化新文件组

在文件组构造函数中，就在创建新的子视图模型之前，添加了一个属性“selected”，默认值为false

此外，主视图模型有两个计算的可见光：

numberOfFiles：返回每个文件组中的文件总数

selectedFiles：返回包含每个文件组中所有选定文件的数组

在submit方法中，有一个简单的警报来演示如何访问所选文件的数组

//从服务器获取的数据
风险值数据=[
{
“组”：“Alice”，
“文件”：[
{“filename”：“red.mp3”，“length”：5}，
{“filename”：“blue.mp3”，“length”：6}，
{“filename”：“yellow.mp3”，“length”：5}
]
},
{
“组”：“Bob”，
“文件”：[
{“filename”：“green.mp3”，“length”：2}，
{“filename”：“purple.mp3”，“length”：10}
]
}
];
//表示单个文件分组的子视图模型
var FileGroup=函数（数据）{
data.files.map（f=>f.selected=false）；
fromJS（数据，{}，this）；
}
//主视图模型
var MyViewModel=函数（数据）{
this.fileGroups=ko.mapping.fromJS（数据，{create:options=>newfilegroup（options.data）}）；
this.numberOfFiles=ko.computed（（）=>{
返回此.fileGroups（）.reduce（（总计，fg）=>{
总计+=fg.files（）.length；
返回总数；
}, 0);
}，这个）；
this.selectedFiles=ko.computed（函数（）{
返回此.fileGroups（）.reduce（（selectedFiles，fg）=>{
selectedFiles.push.apply（selectedFiles，fg.files（）.filter（f=>f.selected（））；
返回所选文件；
}, [])
}，这个）；
this.submit=函数（）{
警报（“发布到服务器的文件：“+this.selectedFiles（）.length”）；
}
}
var viewModel=新的MyViewModel（数据）；
应用绑定（视图模型）
.fileGroup{
边框：1px实心浅灰色；
边缘底部：15px；
填充：10px；
}
.选定{
边框：1px实心浅绿色；
边缘底部：15px；
填充：10px；
}

文件数：
提交
，使其更加清晰