Knockout JS是一款流行的前端JavaScript库，它可以轻松地将数据模型与UI元素绑定在一起。其中一个核心功能是CSS绑定，它允许开发人员根据数据模型的状态动态地更新UI元素的样式。但是，在使用CSS绑定时，如果要处理具有中划线的类名，则需要特殊注意。本文将介绍如何在Knockout JS中正确地处理带有中划线的类名的CSS绑定，并提供示例代码和建议。
问题
在Knockout JS中使用CSS绑定时，通常会通过以下方式指定一个HTML元素的类：
<div data-bind="css: { active: isActive }">...</div>其中，active是一个CSS类名，该类名将在特定情况下被添加或删除，例如当isActive属性为真时。这个例子假设active不包含任何中划线。
然而，如果类名中包含中划线，则不能像上面那样简单地指定类名，例如：
<div data-bind="css: { 'my-class': isActive }">...</div>这里的类名my-class包含了中划线，而且必须用引号括起来。但是，这个绑定语句并不会按照预期工作，因为Knockout JS不会正确解析类名中的中划线。
解决方案
要在Knockout JS中正确地处理带有中划线的类名的CSS绑定，需要使用cssBindingProvider插件。该插件可以拦截所有CSS绑定并自定义它们的行为。
首先，将cssBindingProvider插件添加到项目中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-debug.js"></script> <script src="https://cdn.jsdelivr.net/npm/knockout-css-binding-provider/dist/knockout-css-binding-provider.min.js"></script>
然后，在Knockout JS应用程序启动之前，定义一个新的CSS绑定提供程序，并将其注册到Knockout JS中：
var cssBindingProvider = new CssBindingProvider(); ko.bindingProvider.instance = cssBindingProvider;
现在，就可以使用带有中划线的类名进行CSS绑定。例如：
<div data-bind="css: { 'my-class': isActive }">...</div>这个例子中，my-class是一个带有中划线的类名，可以正常工作了。
示例代码
以下示例演示了如何在Knockout JS中使用带有中划线的类名进行CSS绑定。首先，HTML文件包括knockout-debug.js和knockout-css-binding-provider.min.js两个必要的脚本文件：
-- -------------------- ---- -------
--------- -----
------
------
--------------- -- - --- ------- ---- ---- -- ----- ------------
------- ---------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------------------
-------
------
-----
------------ -- - --- ------- ---- ---- -- ----- ---------
---- --------------- - ----------- -------- ------- -- - --- --------------
------- ----------------- -------------------- ------ --------------
------
-------
--------
-------- ----------- -
--- ---- - -----
------------- - ---------------------
----------------- - -------- -- -
--------------------------------
--
-
--- ------------------ - --- ---------------------
--------------------------- - -------------------
-------------------- -------------
---------
-------
--
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------