使用淘汰赛 css 绑定的多个类的动态绑定（类的名称将来自一些可观察的变量）

Question

我正在尝试使用淘汰赛的 css 绑定，将多个类绑定到一个元素。我知道一些类名，它们将根据某些条件绑定（工作正常）。当我尝试绑定可观察变量时出现问题（它将根据某些条件返回类名）。

这是我尝试过的

function vm()
{
  this.st = ko.observable();
  
  var data = true;
  var self = this;
  this.st(data);
  
  this.divColor = ko.pureComputed(function()
		{
    if(data == true)
      {
         return 'yellow';
        }
    else
     {
       return 'green';
       }
       
    });
                                  
  }

.div1
{
  height : 40px;
  width : 50px;
  border : 1px solid black;
  }

.disable 
{
  border : 1px solid red;
  }

.yellow

{
  background-color : yellow;
  }
.green
{
  background-color : green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class = "div1" data-bind="css : {'disable' : ( st() == 1) , divColor : true'}">
  </div>

我也试过了

<div class = "div1" data-bind="css :divColor , css : {'disable' : ( st() == 1)}">
      </div>

但是这些都没有应用类，即“divColor”正在返回，到元素。第一种方法是将“divColor”作为一个类添加到 div 元素中。

以前有没有人尝试过这样的事情？

我不想根据条件从 js 生成类并绑定它，因为在多个地方使用了相同的 'divColor'，根据条件具有不同的类。

Answer 1

我想到的实现您想要的唯一方法是为 css 绑定构建整个字符串值，以及该元素将具有的所有类（检查 sn-p 代码）。请注意，您还需要包含静态类（如 div1，否则它们将被绑定值覆盖）。

function vm() {
  var self = this,
      data = true;
  self.st = ko.observable(data);
  
  self.divColor = ko.pureComputed(function() {
    if(self.st() == true){
      return 'yellow';
    }
    else {
      return 'green';
    }
  });
}

ko.applyBindings(new vm());

.div1
{
  height : 40px;
  width : 50px;
  border : 1px solid black;
}

.disable 
{
  border : 1px solid red;
}

.yellow
{
  background-color : yellow;
}
.green
{ 
  background-color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="css: (st ? 'disable ' : '') + divColor() + ' div1'"></div>

Answer 2

要使用淘汰赛应用多个 css 类，您需要在对象字面量内单独指定每个 css 类及其自己的条件，或者根据您指定的各种条件让计算或纯可观察返回需要应用的类.

function vm() {
  var data = true;
  var self = this;
  self.st = ko.observable();

  self.st(data);

  self.divColor = ko.pureComputed(function() {
    if (self.st() == true) {
      return 'yellow disable';
    } else {
      return 'green';
    }

  });
}
ko.applyBindings(new vm());

.div1 {
  height: 40px;
  width: 50px;
  border: 1px solid black;
}
.disable {
  border: 1px solid red;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="div1" data-bind="css : {yellow: st, green: !st(), disable : st}">
</div>
<div class="div1" data-bind="css : divColor">
</div>
<label>Has data: <input type="checkbox" data-bind="checked: st" /></label>