Hiding radio options depending on other seperate radio option in knockout [closed] - json

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I plan to have two sets of radio options on my form, one radio called Operating System and another radio called Database.
The option selected by the Operating System radio dictates the values available for selection in the Database radio group.
In my json object the requires field indicates the visibility of the option when the sku of the Operating System is selected. If no requires field is provided for a database option, then it will always be available regardless of the selected operating system.
How would one approach this in knockout, or do I need to rethink my approach?
My jsfiddle is here
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>

Answer 1

I would create a different computed collection availableDatabases where
first I would look up the currently selected OS
then I would use the ko.utils.arrayFilter to filter out the databases where the the requires array does not contain the selected sku.
So I would write something like this:
this.availableDatabases = ko.computed(function() {
var selectedOsName = this.selectedOs();
var selectedOs = ko.utils.arrayFirst(this.os, function(os){
return os.name == selectedOsName;
}, this);
if (!selectedOs)
return [];
return ko.utils.arrayFilter(this.database, function(db){
return db.requires && db.requires.indexOf(selectedOs.sku) > -1;
}, this)
}, this);
And use this new collection in the view:
<div data-bind="foreach: availableDatabases" >
<div>
<input type="radio" name="optionsGroup"
data-bind="attr: {value: name}, checked: $root.selectedDb" />
<span data-bind="text: name"></span>
</div>
</div>
Demo JSFiddle.
Note If you have the sku instead of the name as the value for you first radio buttons:
<input type="radio" name="optionsGroup"
data-bind="attr: {value: sku}, checked: $root.selectedOs" />
Then there is no lookup needed in the computed because selectedOs would contain the sku property directly (Demo)...

Answer 2

Take a look at this fiddle
You can create an computed that retrieves the available databases.
JS :
function viewModel() {
var self = this;
this.os = osOptions;
this.database = databaseOptions;
this.selectedOs = ko.observable();
this.selectedDb = ko.observable();
this.availableDatabase = ko.computed(function () {
var osSku = self.selectedOs();
return ko.utils.arrayFilter(self.database, function (dbItem) {
if (osSku == null) return false;
if (dbItem.requires == null) return true;
var dbs = ko.utils.arrayFirst(dbItem.requires, function (requiredOS) {
return requiredOS == osSku;
}) != null;
return dbs;
});
});
};
ko.applyBindings(new viewModel);
I hope it helps.