淘汰赛类绑定在组件中不起作用
Posted
技术标签:
【中文标题】淘汰赛类绑定在组件中不起作用【英文标题】：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 似乎确实可以解决它...
【参考方案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
【讨论】：
以上是关于淘汰赛类绑定在组件中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
箭头函数“this”绑定在 React 组件中不起作用 [重复]