Question

我有一个案例

我有一个可观察的数组，我有一个组件，它可以保证给定的可观察数组中存在一个值，如果存在则更改css。

对于此脚本中的ex我要检查，如果单词＆＃34; hello＆＃34;存在于数组中，如果它存在，则将css更改为蓝色

SCRIPT

function VM() {
    var arrInterests = 'hello,world'.split(',');    
    this.interests = ko.observableArray(arrInterests);
};

ko.applyBindings((new VM()));

HTML

<p class="green" data-bind="css: { 'blue': interests() === 'hello'}">Hello exists:
</p>

CSS

.green {
    background-color: green;
    border:2px solid red;
}

.blue {
    background-color: blue;
    border:2px solid red;
}

Answer 1

您应该使用Array.indexOf在数组中搜索值：

interests().indexOf('hello') >= 0

当然，您应该将此代码放在viewmodel中的计算属性中：

function VM() {
    var arrInterests = 'hello,world'.split(',');    
    this.interests = ko.observableArray(arrInterests);
    this.contains = function(value) {
        return ko.computed(function() {
            return this.interests().indexOf(value) >= 0;
        });
    };
};

// usage

<p class="green" data-bind="css: { 'blue': contains('hello') }">Hello exists:</p>
<p class="green" data-bind="css: { 'red': contains('world') }">world exists:</p>
....

在可观察数组中存在键时，敲除更改css类

1 个答案: