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

要使用knockout应用多个css类，您需要在对象文字中分别指定每个css类及其自身的条件，或者使用computed或pure observable返回需要应用的类，具体取决于您指定的各种条件

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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用knockout css绑定动态绑定多个类（类的名称将来自某个可观察变量）

2 个答案: