Question

我有一个包含3个菜单的多选列表。我引用了KO网站，我试图让3个菜单“选项”以不同的方式显示在每个菜单中。每次我做出改变，它都会改变所有这些。我确信一个可观察的东西需要复制并在某处改变，我只是不确定。

我的目标是运行一个if语句来检查条件是否匹配x，x，x

function Attribute(data) {
    var self = this;
    self.Id = data.Id;
    self.Name = data.Name;
}

function Attribute2(data) {
    var self = this;
    self.Id = data.Id;
    self.Name = data.Name;
}


// Individual Row in Table

function Criteria(data) {
    var self = this;
    self.Attributes = ko.observableArray(data.Attributes);
}

function Criteria2(data) {
    var self = this;
    self.Attributes2 = ko.observableArray(data.Attributes2);
}
// Represent the ViewModel for attributes.
function CriteriaViewModel() {
    var self = this;

    // Catalog Data
    self.availableAttributes = window.ko.observableArray([]);
    self.availableAttributes(ko.utils.arrayMap(rawAttributes, function(item) { return new Attribute(item); }));

 self.availableAttributes2 = window.ko.observableArray([]);
    self.availableAttributes2(ko.utils.arrayMap(rawAttributes2, function(item) { return new Attribute2(item); }));
    
    // Editable Data
    self.criterion = window.ko.observableArray([]);
    self.criterion(ko.utils.arrayMap(rawCriterion, function (item) { return new Criteria(item); }));
    
    self.criterion2 = window.ko.observableArray([]);
    self.criterion2(ko.utils.arrayMap(rawCriterion2, function (item) { return new Criteria2(item); }));
}

function CriteriaViewModel2() {
    var self = this;

    // Catalog Data
   
 self.availableAttributes2 = window.ko.observableArray([]);
    self.availableAttributes2(ko.utils.arrayMap(rawAttributes2, function(item) { return new Attribute2(item); }));
    
    // Editable Data
    self.criterion = window.ko.observableArray([]);
    self.criterion(ko.utils.arrayMap(rawCriterion, function (item) { return new Criteria(item); }));
    
    self.criterion2 = window.ko.observableArray([]);
    self.criterion2(ko.utils.arrayMap(rawCriterion2, function (item) { return new Criteria2(item); }));
}


var rawAttributes = [
    {
        Id:'1',
        Name:'text1'
    },
    {
        Id:'2',
        Name:'text2'
    },
    
    {
        Id:'3',
        Name:'text3'
    },
       
    {
        Id:'4',
        Name:'text4'
    }
];

var rawAttributes2 = [
    {
        Id:'1',
        Name:'tedsdd'
    },
    {
        Id:'2',
        Name:'text2'
    },
    
    {
        Id:'3',
        Name:'text3'
    },
       
    {
        Id:'4',
        Name:'text4'
    }
];

var rawCriterion = [
    {
        Attributes : []   
    },
       
];

var rawCriterion2 = [
    {
        Attributes : []   
    },
       
];

ko.applyBindings(new CriteriaViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<!----Set 1--->
<div data-bind="foreach: criterion">    
    <select class="selectedAttributes"
            data-bind="options: $root.availableAttributes, 
                        selectedOptions: Attributes, 
                        optionsText: 'Name', 
                        optionsValue: 'Id'"
            multiple
            size="6">
    </select>
</div>

<div data-bind="foreach: criterion">
    <div data-bind='text:"Criteria " + $index()'></div>
    <ul data-bind='foreach:Attributes'>
        <li data-bind='text:$data'></li>
    </ul>
</div>

<!-------------Set 2-------------->
<div data-bind="foreach: criterion2">    
    <select class="selectedAttributes2"
            data-bind="options: $root.availableAttributes, 
                        selectedOptions: Attributes2, 
                        optionsText: 'Name', 
                        optionsValue: 'Id'"
            multiple
            size="6">
    </select>
</div>


<div data-bind="foreach: criterion2">
    <div data-bind='text:"Criteria2 " + $index()'></div>
    <ul data-bind='foreach:Attributes2'>
        <li data-bind='text:$data'></li>
    </ul>
</div>

Answer 1

您尝试使选项不同但您将每个选项绑定绑定到同一个数组。他们每个人都会展示该阵列的选项。

如果您希望选项是该数组的子集，请执行以下操作：

var arrayToDeriveFrom = ko.utils.arrayMap(rawAttributes, function (item)
    return new Attribute(item);
});

var availableAttributes1 = ko.pureComputed(function () {
    return ko.utils.arrayFilter(arrayToDeriveFrom, function (item) {
        // do filtering here
    });
});

<select class="selectedAttributes1"
        data-bind="options: $root.availableAttributes1, 
                    selectedOptions: Attributes1, 
                    optionsText: 'Name', 
                    optionsValue: 'Id'"
        multiple
        size="6">
</select>

敲门会改变属性并检查标准

1 个答案: