KnockoutJS 使用 css 属性添加静态和动态类名答案

【问题标题】：KnockoutJS add static and dynamic class name using css propertyKnockoutJS 使用 css 属性添加静态和动态类名
【发布时间】：2018-11-01 00:13:52
【问题描述】：

我想添加一个动态类名，该类名将基于一些检查来自 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>

【问题讨论】：

combine dynamic and static classes through css binding, knockout.js的可能重复

标签： javascript knockout.js

【解决方案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>

此解决方案将现有的类属性与MyPropertyName 属性相结合。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您还可以将样式和 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" />

【讨论】：