Javascript Knockoutjs：复选框列出多对多关系

我在下面的代码片段中创建了一个淘汰模型

我想做的是从我添加到选项中的选项行在弹出对话框中创建一个多对多关系（我希望在您查看jsfiddler时这是有意义的）。单击行上“子”列上的“查找”链接时，我会在对话框中列出所有选项行，并带有复选框列表，允许用户选择与特定行的子关系，从而在行之间建立多对多关系

我已将所需的数据默认为第一个选项组中的输出，但我不确定如何进行此操作

我不确定我是否以正确的方式进行，我希望一些击倒大师能为我指出正确的方向，让我在弹出窗口中获得这个功能

/*选择选项*/
var initialData=[{
标题：“用户乐队”，
productoptionrows：[{
id:“1”，
标题：“25-100”，
相关的：[{
id:“4”，
标题：“1年”
}, {
id:“5”，
标题：“2年”
}, {
id:“6”，
标题：“3年”
}]
}, {
id:“2”，
标题：“101-250”，
相关的：[{
id:“7”，
标题：“1年”
}, {
id:“8”，
标题：“2年”
}, {
身份证号码：“9”，
标题：“qwe”
}]
}, {
id:“3”，
标题：“251-500”，
相关的：[{
身份证号码：“10”，
标题：“1年”
}, {
id:“11”，
标题：“2年”
}, {
id:“12”，
标题：“3年”
}]
}]
}, {
标题：“请选择许可证的年数”，
productoptionrows：[{
id:“4”，
标题：“1年”，
相关：[]
}, {
id:“5”，
标题：“2年”，
相关：[]
}, {
id:“6”，
标题：“3年”，
相关：[]
}, {
id:“7”，
标题：“1年”，
相关：[]
}, {
id:“8”，
标题：“2年”，
相关：[]
}, {
身份证号码：“9”，
标题：“3年”，
相关：[]
}, {
身份证号码：“10”，
标题：“1年”，
相关：[]
}, {
id:“11”，
标题：“2年”，
相关：[]
}, {
id:“12”，
标题：“3年”，
相关：[]
}]
}];
$（文档）.ready（函数（）{
/*模型*/
变量映射选项={
“productoptionrows”：{
创建：函数（选项）{
返回新产品选项行（options.data）；
}
}
};
变量映射选项SPR={
创建：函数（选项）{
返回新产品选项行（options.data）；
}
};
var productoptionrow=函数（por）{
var self=ko.mapping.fromJS（por，{}，this）；
self.relatedcsv=ko.computed（函数（）{
return$（por.related）.map（函数（）{
返回此.id；
}).get（）.join（'，'）；
}，自我）；
self.selectedrelated=ko.observableArray（$（por.related）.map（函数（）{
返回此.id；
}).get（））；
};
var ProductOptionModel=函数（数据）{
var self=这个；
self.productoptions=ko.mapping.fromJS（数据，映射选项）；
self.isOpen=ko.可观察（假）；
self.selectedrelated=ko.observableArray（[]）；
/*控制事件*/
self.addProductOption=函数（）{
var newoption=ko.mapping.fromJS({
标题：“请选择许可证的年数”，
ProductOption行：ko.array([{
身份证号码：“15”，
标题：“25-100”，
相关：[]
}, {
id:“16”，
标题：“101-250”，
相关：[]
}, {
身份证号码：“17”，
标题：“251-500”，
相关：[]
}])
}，映射选项）；
self.productoptions.push（newoption）；
};
self.copyProductOption=函数（productoption）{
var copy=ko.mapping.fromJS（ko.mapping.toJS（productoption），mappingOptions）；
self.productoptions.push（复制）；
};
self.removeProductOption=函数（productoption）{
self.productoptions.remove（productoption）；
};
self.addProductOptionRow=函数（productoption）{
var newrow=ko.mapping.fromJS({
身份证号码：“15”，
标题：“25-100”，
相关：[]
}，映射选项PR）；
productoption.productoptionrows.push（新行）；
};
self.removeProductOptionRow=函数（productoption）{
$.each（self.productoptions（），function（）{
this.productoptionrows.remove（productoption）
})
};
self.open=函数（productoption，事件）{
self.selectedrelated（productoption.related）；
self.isOpen（真）；
};
self.close=函数（）{
self.isOpen（假）；
}
self.associatered=函数（记录，元素）{
//log（ko.mapping.toJS（record））；
}
};
ko.applyBindings（新产品选项模型（initialData），document.getElementById（'page-wrapper'）；
});

添加选项
组标题*
复制
删除选项
身份证件
标题*
儿童