1

我计划在我的表格上设置两组收音机选项，一组叫作收音机Operating System，另一组叫作Database。

收音机选择的选项规定了收音机组Operating System中可供选择的值。Database

在我的 json 对象中，该requires字段指示选择操作系统的 sku 时选项的可见性。如果没有requires为数据库选项提供字段，则无论选择何种操作系统，它都将始终可用。

在淘汰赛中如何解决这个问题，还是我需要重新考虑我的方法？

我的 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>
4

2 回答 2

3

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

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

所以我会写这样的东西：

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);

并在视图中使用这个新集合：

<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你的第一个单选按钮：

<input type="radio" name="optionsGroup" 
                    data-bind="attr: {value: sku}, checked: $root.selectedOs" />

然后在计算中不需要查找，因为selectedOs将直接包含sku属性（Demo）......

于 2013-07-15T11:27:04.190 回答
2

看看这个小提琴

您可以创建一个检索可用数据库的计算。

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);

我希望它有所帮助。

于 2013-07-15T11:57:04.507 回答