javascript - 在 Knockout 样式绑定(bind)中使用 CSS3 变量

Question

我正在尝试使用 knockout 的 style binding添加 CSS3 variables到一些 div 元素，然后在我们的 CSS 中使用这些元素来计算最终样式。

例子:

var viewModel = function ViewModel() {
  this.randomColor = ko.computed(function() {
    // Random color thanks to @paul_irish
    return "#" + Math.floor(Math.random() * 16777215).toString(16);
  });
}();

ko.applyBindings(viewModel);

h2 {
  /* default fall-back color: */
  --random-colour: #666;
  color: var(--random-colour);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h2 data-bind="style: {'--random-colour': randomColor}">This should receive a random text color.</h2>

http://jsfiddle.net/tujhxdmc/5/

我希望它在样式标签中应用 css 变量，但它似乎只是被忽略了。周围的绑定(bind)和使用标准 CSS 属性的绑定(bind)都按预期工作，所以我确定这是 CSS 变量的问题。

Knockout's documentation状态:

If you want to apply a font-weight or text-decoration style, or any other style whose name isn’t a legal JavaScript identifier (e.g., because it contains a hyphen), you must use the JavaScript name for that style. For example,

• Don’t write { font-weight: someValue }; do write { fontWeight: someValue }

但这不适用于 CSS 变量(必须以双连字符开头)。

如何在 Knockout 的样式绑定(bind)中使用 CSS 变量？

Answer 1

如果不增加 Knockout，现在看来这是不可能的。

考虑一下样式绑定(bind)在此处的源代码中是如何操作的: knockout/src/binding/defaultBindings/style.js .

特别是这一行:

 element.style[styleName] = styleValue;

无论何时运行，styleName 都将是 CSS 变量 "--random-colour"。

但是，您不能通过element.style["--random-colour"] 设置样式。你必须通过 style.setProperty() .

同时考虑这个问题:Accessing a CSS custom property (aka CSS variable) through JavaScript

---

如果您现在需要此功能，您可以加载 knockout 库脚本，然后覆盖 ko.bindingHandlers['style'].update 函数以使用将使用 的版本设置属性():

ko.bindingHandlers['style'] = {
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor() || {});
        ko.utils.objectForEach(value, function(styleName, styleValue) {
            styleValue = ko.utils.unwrapObservable(styleValue);

            if (styleValue === null || styleValue === undefined || styleValue === false) {
                // Empty string removes the value, whereas null/undefined have no effect
                styleValue = "";
            }

            if(styleName.substring(0, 2) === "--"){
                element.style.setProperty(styleName, styleValue);
            } else {
                element.style[styleName] = styleValue;
            }
        });
    }
};

---

我在 KnockOut GitHub 上添加了一个问题，以防其他更好的响应来自那里:Cannot bind to custom CSS property variables #2400 .