Question

我想添加一个动态类名，它将基于一些检查来自javascript。但是在那里有一个类navigate-forward，它也会根据检查结果显示出来。如何将两者结合？

以下是我的代码-

<span class="menu-item" data-bind="text: data.description,
            css: {
                    'navigate-forward': !child.action,
                    child.className //I tried something like this which doesn't work
            }"></span>

child.className的值将基于对javascript代码的某些检查。不管它提供什么值，我都想将该类添加到此span中。

例如如果child.className是tooltip，则应将该类添加到跨度中。

输出

<span class="menu-item navigate-forward tooltip">Menu item</span>

Answer 1

css:绑定仅接受类列表以及是否应用它们。您可以使用：

<div data-bind="attr: { 'class': MyPropertyName }" class="initialClass"></div>

但是，这将覆盖该元素上的所有先前存在的类（initialClass）。

看看https://github.com/knockout/knockout/wiki/Bindings---class，那里有一个自定义绑定处理程序，允许您指定动态类：

<div class="initialClass" data-bind="class: MyPropertyName"></div>

此解决方案将结合现有的class属性和MyPropertyName属性。

Answer 2

function vm(){
  var self = this;
  self.className = ko.observable("class2");
}


(function(){
var viewModel = new vm();
ko.applyBindings(viewModel);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label class="class1" data-bind="css:className">Your Element</label>

Answer 3

您还可以将style和css绑定与保存所有样式和类的对象一起使用，而不用使用单独的类名。这样可以采用更具编程性的方法。

function viewModel(){
  var self = this;
  this.description = ko.observable('placeholder text');
  this.useBlue = ko.observable(false);
  this.borderClass = ko.observable("red-border");

  this.classes = ko.pureComputed(function(){
    var obj = {
      'blue-background': self.useBlue()
    };
    obj[self.borderClass()] = true;
    return obj;
  });
}

ko.applyBindings(new viewModel());

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<span class="menu-item" data-bind="text: description, css: classes"></span>
<br/>
            
<input type="button" data-bind="click: function(){ useBlue(!useBlue()) }" value="toggle" />

KnockoutJS使用CSS属性添加静态和动态类名称

3 个答案: