以下は、オブジェクトのサンプル構造です。
[{
MasterType: "mtype1",
Types: [{
TypeStage: "st1",
TypeDate: "12/02/2001",
SubTypes: [{
SubTypeData: "st1"
}, {
AnotherData: "ad1"
}]
}, {
TypeStage: "st3",
TypeDate: "15/02/2001",
SubTypes: [{
SubTypeData: "st3"
}, {
AnotherData: "ad3"
}]
}]
},
{
MasterType: "mtype2",
Types: [{
TypeStage: "st2",
TypeDate: "12/04/2001",
SubTypes: [{
SubTypeData: "st2"
}, {
AnotherData: "ad2"
}]
}]
}];
注: ページ読み込み時には、オブジェクトは空です。
各行の編集/削除を含む MasterType のテーブルを表示する必要があります。また、[追加] ボタンが必要です。これにより、テーブルが非表示になり、新しい MasterType の値を入力するための入力フィールドが表示されます。新しい MasterType が保存されたら、入力フィールドを非表示にしてテーブルを再度表示する必要があります。
助けてください
私は次のことをしました：
<table>
<tbody data-bind="foreach: MasterTypes">
<tr><td data-bind='text: MasterType'></td></tr>
</tbody>
</table>
<div >
<table>
<tbody data-bind="foreach: MasterTypes">
<tr>
<td>
<input data-bind="value: MasterType,valueUpdate: 'afterkeydown'" />
<div><a href='#' data-bind='click: $root.removeMasterType'>Delete</a></div>
</td>
<td>
<table>
<tbody data-bind="foreach: Types">
<tr>
<td><input data-bind='value: TypeStage' /></td>
<td><input data-bind='value: TypeDate' /></td>
<td><a href='#' data-bind='click: $root.removeType'>Delete</a></td>
<td>
<table>
<tbody data-bind="foreach: SubTypes">
<tr>
<td><input data-bind='value: Discharge' /></td>
<td><a href='#' data-bind='click: $root.removeSubType'>Delete</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addSubType'>Add New Sub type</a>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addType'>Add new Type</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addMasterType'>Add New MasterType</button>
<button data-bind='click: save, enable: MasterTypes().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
<script type="text/javascript">
var MasterTypesModel = function (mastertypes) {
var self = this;
self.tableVisible = ko.observable(true);
self.MasterTypes = ko.observableArray(ko.utils.arrayMap(mastertypes, function (mastertype) {
return { MasterType: mastertype.MasterType, Types: ko.observableArray(ko.utils.arrayMap(mastertype.Types, function (type) {
return { TypeStage: type.TypeStage, TypeDate: type.TypeDate, SubTypes: ko.observableArray(type.SubTypes) };
}))
};
}));
self.addMasterType = function () {
// self.tableVisible(false);
self.MasterTypes.push({
MasterType: "",
Types: ko.observableArray(
[{ TypeStage: "", TypeDate: "", SubTypes: ko.observableArray()}]
)
});
};
self.removeMasterType = function (mastertype) {
self.MasterTypes.remove(mastertype);
};
self.addType = function (mastertype) {
mastertype.Types.push({
TypeStage: "",
TypeDate: "",
SubTypes: ko.observableArray()
});
};
self.removeType = function (type) {
$.each(self.MasterTypes(), function () {
this.Types.remove(type)
})
};
self.addSubType = function (type) {
type.SubTypes.push({
Discharge: ""
});
};
self.removeSubType = function (subtype) {
$.each(self.MasterTypes(), function () {
$.each(this.Types(), function () {
this.SubTypes.remove(subtype)
})
})
};
self.save = function () {
self.lastSavedJson(JSON.stringify(ko.toJS(self.MasterTypes), null, 2));
$.ajax({
url: "/MyController/UpdateMasterType",
contentType: 'application/json',
type: 'POST',
data: ko.toJSON(self.MasterTypes),
success: function (data) {
self.lastSavedJson = ko.observable("")
alert('That is it!');
}
});
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new MasterTypesModel());
</script>