我一直试图用'删除comp'链接删除配方元素，但我不确定它为什么不起作用。此外，“添加另一个组合”链接正在运行一次，但不是多次。 我正在使用Knockout.js，任何解释为什么这不起作用将会非常有用。
$( document ).ready(function() {
var initialData = [
];
var brandNamesModel = function(brandNames) {
var self = this;
self.brandNames = ko.observableArray(ko.utils.arrayMap(brandNames, function(drug) {
return { brandName: drug.brandName, formulations: ko.observableArray(drug.formulations), compositions: ko.observableArray(drug.compositions) };
}));
self.addBrandName = function() {
self.brandNames.push({
brandName: "",
formulations: ko.observableArray(),
compositions: ko.observableArray()
});
};
self.removeBrandName = function(drug) {
self.brandNames.remove(drug);
};
self.addFormulations = function(drug) {
drug.formulations.push({
compositions: ko.observableArray()
});
};
self.removeFormulations = function(formulation) {
$.each(self.brandNames(), function() { this.formulations.remove(formulation) })
};
self.addComposition = function(drug) {
drug.compositions.push({
type: "",
number: ""
});
};
self.removeComposition = function(composition) {
$.each(self.brandNames(), function() { this.compositions.remove(composition) })
};
self.save = function() {
self.lastSavedJson(JSON.stringify(ko.toJS(self.brandNames), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new brandNamesModel(initialData));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class='container'>
<h2>brandNames</h2>
<div>
<table>
<tr>
<th>Brand name</th>
<th>formulations</th>
</tr>
<tbody data-bind="foreach: brandNames">
<tr>
<td>
<input data-bind='value: brandName' />
<div><a href='#' data-bind='click: $root.removeBrandName'>Delete brand name</a></div>
</td>
<td>
<table>
<tbody data-bind="foreach: formulations">
<tr>
<td><label>Formulation</label></td>
<td><select>
<option>Tablet</option>
<option>Syrap</option>
</select>
</td>
<td><a href='#' data-bind='click: $root.removeFormulations'>Delete</a></td>
<td>
<table>
<tbody data-bind="foreach: compositions">
<tr>
<td><input data-bind='value: type' /></td>
<td><input data-bind='value: number' /></td>
<td><a href='#' data-bind='click: $root.compositions.removeComposition'>Delete comp</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addComposition'>Add another composition</a>
</td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addFormulations'>Add formulations</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addBrandName'>Add a drug</button>
<button data-bind='click: save, enable: brandNames().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
</div>
答案 0 :(得分：1)
很明显，您需要formulation对象删除composition。因此，为了获得formulation以及composition，请按照以下方式编写点击装订：
<a href='#' data-bind='click: function() {$root.removeComposition($data, $parent) }'>Delete comp</a>
然后，您可以按如下方式编写删除合成功能：
self.removeComposition = function(composition,formulation ) {
formulation.compositions.remove(composition);
};
$( document ).ready(function() {
var initialData = [
];
var brandNamesModel = function(brandNames) {
var self = this;
self.brandNames = ko.observableArray(ko.utils.arrayMap(brandNames, function(drug) {
return { brandName: drug.brandName, formulations: ko.observableArray(drug.formulations), compositions: ko.observableArray(drug.compositions) };
}));
self.addBrandName = function() {
self.brandNames.push({
brandName: "",
formulations: ko.observableArray(),
compositions: ko.observableArray()
});
};
self.removeBrandName = function(drug) {
self.brandNames.remove(drug);
};
self.addFormulations = function(drug) {
drug.formulations.push({
compositions: ko.observableArray()
});
};
self.removeFormulations = function(formulation) {
$.each(self.brandNames(), function() { this.formulations.remove(formulation) })
};
self.addComposition = function(drug) {
drug.compositions.push({
type: "",
number: ""
});
};
self.removeComposition = function(composition,formulation ) {
formulation.compositions.remove(composition);
};
self.save = function() {
self.lastSavedJson(JSON.stringify(ko.toJS(self.brandNames), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new brandNamesModel(initialData));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class='container'>
<h2>brandNames</h2>
<div>
<table>
<tr>
<th>Brand name</th>
<th>formulations</th>
</tr>
<tbody data-bind="foreach: brandNames">
<tr>
<td>
<input data-bind='value: brandName' />
<div><a href='#' data-bind='click: $root.removeBrandName'>Delete brand name</a></div>
</td>
<td>
<table>
<tbody data-bind="foreach: formulations">
<tr>
<td><label>Formulation</label></td>
<td><select>
<option>Tablet</option>
<option>Syrap</option>
</select>
</td>
<td><a href='#' data-bind='click: $root.removeFormulations'>Delete</a></td>
<td>
<table>
<tbody data-bind="foreach: compositions">
<tr>
<td><input data-bind='value: type' /></td>
<td><input data-bind='value: number' /></td>
<td><a href='#' data-bind='click: function() {$root.removeComposition($data, $parent) }'>Delete comp</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addComposition'>Add another composition</a>
</td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addFormulations'>Add formulations</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addBrandName'>Add a drug</button>
<button data-bind='click: save, enable: brandNames().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
</div>