我计划在我的表格上设置两组收音机选项,一组叫作收音机Operating System
,另一组叫作Database
。
收音机选择的选项规定了收音机组Operating System
中可供选择的值。Database
在我的 json 对象中,该requires
字段指示选择操作系统的 sku 时选项的可见性。如果没有requires
为数据库选项提供字段,则无论选择何种操作系统,它都将始终可用。
在淘汰赛中如何解决这个问题,还是我需要重新考虑我的方法?
var osOptions = [{
name: "Windows Standard",
sku: "201",
},{
name: "Windows Enterprise",
sku: "202",
}, {
name: "CentOS Linux",
sku: "203",
}, {
name: "Debian",
sku: "204",
}];
var databaseOptions = [{
name: None,
}, {
name: "SQL Express",
sku: 401,
requires: ["201", "202"]
}, {
name: "SQL Standard",
sku: 402,
requires: ["202"]
}, {
name: "MySQL",
sku: "MySQL1",
requires: ["201", "202", "203"]
}, {
name: "RavenDb",
sku: 403,
}, {
name: "MongoDB",
sku: 404,
requires: ["204"]
}];
function viewModel() {
this.os = osOptions;
this.database = databaseOptions;
this.selectedOs = ko.observable();
this.selectedDb = ko.observable();
}
ko.applyBindings(new viewModel);
<!- view html -->
<h1>Select OS:</h1>
<div data-bind="foreach: os" >
<div>
<input type="radio" name="optionsGroup" data-bind="attr: {value: name}, checked: $root.selectedOs" />
<span data-bind="text: name"></span>
</div>
</div>
<h1>Select Db</h1>
<div data-bind="foreach: database" >
<div>
<input type="radio" name="optionsGroup" data-bind="attr: {value: name}, checked: $root.selectedDb" />
<span data-bind="text: name"></span>
</div>
</div>