根据淘汰赛中其他单独的无线电选项隐藏无线电选项 [英] Hiding radio options depending on other seperate radio option in knockout

问题描述

我计划在表单上设置两组无线电选项，一个称为Operating System的无线电，另一个称为Database的无线电.

I plan to have two sets of radio options on my form, one radio called Operating System and another radio called Database.

由Operating System收音机选择的选项决定了Database收音机组中可供选择的值.

The option selected by the Operating System radio dictates the values available for selection in the Database radio group.

在我的JSON对象的字段指示被选择的操作系统的SKU当选项的可见性.如果没有为数据库选项提供requires字段，则无论选择什么操作系统，该字段将始终可用.

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?

我的jsfiddle在这里

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>

推荐答案

我将创建一个不同的计算集合availableDatabases其中

I would create a different computed collection availableDatabases where

• 首先，我将查找当前选择的操作系统
• 然后，我将使用ko.utils.arrayFilter过滤掉requires数组不包含所选sku的数据库.

• 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>

演示 JSFiddle.

注意:如果第一个单选按钮具有sku而不是name作为value:

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" />

然后，由于selectedOs直接包含sku属性(演示)...

Then there is no lookup needed in the computed because selectedOs would contain the sku property directly (Demo)...

这篇关于根据淘汰赛中其他单独的无线电选项隐藏无线电选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！