Knockout组件中class绑定失效求助：css/attr绑定可正常工作

别担心，这完全是个常见的小误解——Knockout从一开始就没有class这个内置绑定，你写的data-bind="class: IconCssClass"相当于用了一个不存在的绑定，Knockout会直接忽略它，自然看不到样式生效。

为什么另外两种方式能正常工作？ #

• css绑定：这才是Knockout官方提供的、专门用于控制CSS类的绑定。它支持多种用法：直接传类名字符串、对象（键是类名，值是布尔值控制是否添加）、数组等，你的场景中用计算属性返回类名完全符合它的使用规则，所以能正常生效。
• attr: { 'class': IconCssClass }：这是通过attr绑定直接操作DOM元素的class属性，本质和原生JS设置element.className一样，所以也能把类名加上，但这种方式不如css绑定灵活——比如css可以单独添加/移除某个类而不影响其他类，而attr会直接覆盖整个类列表。

修正你的代码 #

只需要把无效的class绑定改成css绑定即可：

// 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 /> fixed class binding (using css): <span data-bind="css: 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>

额外实用提示 #

如果你需要动态控制单个类的添加/移除，css绑定的对象语法会更方便，比如：

this.isEditable = ko.observable(true);

<span data-bind="css: { 'fas fa-edit': isEditable }"></span>

内容的提问来源于stack exchange，提问作者piter entity