在 Knockout 样式绑定中使用 CSS3 变量

Question

我正在尝试使用淘汰赛的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 变量，但它似乎只是被忽略了。周围的绑定和使用标准 CSS 属性的绑定都按预期工作，所以我确定这是 CSS 变量的问题。

Knockout's documentation 状态：

如果您想应用字体粗细或文本装饰样式，或名称不是合法 JavaScript 标识符的任何其他样式（例如，因为它包含连字符），您必须使用该样式的 JavaScript 名称.例如，

• 不要写 { font-weight: someValue };写 { fontWeight: someValue }

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

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

Answer 1

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

考虑一下现在如何在源代码中操作样式绑定： 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

---

如果您现在需要此功能，可以加载淘汰库脚本，然后覆盖 ko.bindingHandlers['style'].update 函数以使用将使用 setProperty() 的版本：

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。