敲除 class 绑定在组件中不起作用

Question

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

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

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

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

这是一个敲除错误还是我遗漏了什么？试图 google 解决这个问题，但似乎没有其他人遇到过这个问题。

这是一个代码片段：

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

Answer 1

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

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

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

The new class binding supports dynamic class strings. This allows you to use the css and class bindings together to support both methods of setting CSS classes.

完整的淘汰赛 3.5.0-beta 发行说明：
https://github.com/knockout/knockout/releases/tag/v3.5.0-beta

敲除 class 绑定在组件中不起作用

Knockout class binding not working in a component

html

css

knockout.js

font-awesome