KnockoutJS css和class在同一个绑定答案

【问题标题】：KnockoutJS css and class in the same bindingKnockoutJS css和class在同一个绑定
【发布时间】：2020-02-13 14:35:11
【问题描述】：

尽管https://knockoutjs.com/documentation/css-binding.html 中的部分我无法同时使用 css 和 class，但我可以使用两种不同的 css 绑定：http://jsfiddle.net/g9sot5qb/

是我做错了什么还是文档不准确？

<span class="cls1 cls2" data-bind="text: title,css: {active: active}, class: myClass" ></span>
<span class="cls1 cls2" data-bind="text: title,css: {active: active}, css: myClass" ></span>

【问题讨论】：

标签： javascript knockout.js knockout-3.0

【解决方案1】：

class 绑定是 Knockout 版本的 3.5 功能。

从 v 3.5 release notes:

新的类绑定支持动态类字符串。
这允许您同时使用 css 和类绑定来支持设置 CSS 类的两种方法。

您的 jsfiddle 使用的是旧版本。

另请注意，observable active 必须具有 true 值才能应用 css class 'active'。

请参见下面的（可运行）示例，其中class 和css 绑定都处于活动状态。

var viewModel= {
  myClass: ko.observable('test'),
  title: ko.observable('Title'),
  active: ko.observable(true)
};

ko.applyBindings(viewModel);

.test{
  color: red
}

.active {
  font-size: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>

<span class="cls1 cls2" data-bind="text: title, css: {active: active}, class: myClass" ></span>

【讨论】：