javascript - 使用knockout css绑定(bind)动态绑定(bind)多个类(类的名称将来自一些可观察的变量)

Question

我正在尝试使用 knockout 的CSS绑定(bind)，将多个类绑定(bind)到一个元素。我知道一些类名，这些类名将根据某些条件进行绑定(bind)(效果很好)。当我尝试绑定(bind)可观察变量(它将根据某些条件返回我的类名)时出现问题。

这是我尝试过的

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 生成类并绑定(bind)它，因为根据条件在多个具有不同类的地方使用相同的“divColor”。

Answer 1

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

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>