淘汰赛类绑定在组件中不起作用答案

【问题标题】：Knockout class binding not working in a component淘汰赛类绑定在组件中不起作用
【发布时间】：2020-11-20 02:30:05
【问题描述】：

我创建了一个淘汰赛组件，并在内部尝试将span 元素绑定到视图模型中定义的 CSS 类。我通常为此使用class 绑定：

<span data-bind="class: IconCssClass"></span>

但由于某种原因，它不起作用 - 它根本不应用该类。
但是，当我使用 css 绑定或 attr 绑定时，两者都按预期工作：

<span data-bind="attr: { 'class': IconCssClass }"></span>
<span data-bind="css: IconCssClass"></span>

这是一个淘汰错误还是我错过了什么？试图用谷歌搜索，但似乎没有其他人遇到过这个问题。

这是一个代码sn-p：

// Register a simple component:
ko.components.register('my-icon', {
  viewModel: function(params) {
    this.IconCssClass = ko.computed(function () {
      return "fas fa-edit"; // hardcoded to keep the example simple
    }, this)
  },
  template: 'attr binding: <span data-bind="attr: { \'class\': IconCssClass }"></span> <br /> css binding: <span data-bind="css: IconCssClass"></span> <br /> class binding: <span data-bind="class: IconCssClass"></span>'
});

// Apply bindings
ko.applyBindings();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<body>

  <p>
    The component:
  </p>
  <my-icon></my-icon>

</body>

【问题讨论】：

这太奇怪了...当我在ko.bindingHandlers 中查找类绑定时，它似乎完全丢失了。升级到淘汰赛 3.5.0 似乎确实可以解决它...

标签： html css knockout.js font-awesome

【解决方案1】：

我找到了原因，所以我会回答我自己的问题。

class 绑定在淘汰赛中是新的，直到淘汰赛 3.5.0-beta 才出现。
不幸的是，在淘汰文档中没有提到这一点，其中描述了 css 和 class 绑定，但没有任何信息表明其中一个是相当新的：
https://knockoutjs.com/documentation/css-binding.html

您必须查看发行说明才能找到此信息：

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

完全淘汰 3.5.0-beta 版本说明：
https://github.com/knockout/knockout/releases/tag/v3.5.0-beta

【讨论】：