将数组绑定到 Knockout 样式绑定

Question

我有一个 css 属性的 observableArray。元素是这样的：

[{ "--border-color": "red" //(colorName = observable - colorValue = observable) ... }]

我想避免使用foreach 创建多个<style> 标签。

我需要可以做这样的事情的东西：

data-bind="style: colorStyles"  //colorStyles = array mentioned above

有什么想法吗？

Answer 1

第 1 步：将属性数组合并到一个对象中

有很多方法可以做到这一点，其中我更喜欢使用Object.assign 和扩展语法：

const mergedStyle = Object.assign({}, ...colorStyles);

对于其他（更多兼容浏览器）方式，谷歌/搜索“合并对象数组”。

第 2 步：设置样式

从您的属性名称的外观来看，您使用的是custom css properties，据我所知，default style binding 不支持...

您可以编写一个快速的自定义绑定，在内部使用element.style.setProperty 来添加支持：

ko.bindingHandlers.varStyle = {
  init: (el, va) => {
    ko.computed(() => {
      Object.entries(ko.unwrap(va()))
        .forEach(([prop, val]) => {
          el.style.setProperty(prop, val);
        });
    });
  }
}

确保检查您的边缘情况。

演示：

第一个元素呈现常规的、未更改的<div> 样式。第二个使用默认的style 绑定，无法更新自定义属性。第三个元素使用自定义绑定，同时更新color 和background-color。

// Our style objects:
const allStyles = ko.observableArray([
  { "color": "white" },
  { "--my-color": "red" }
]);

const mergedStyle = ko.pureComputed(
  () => Object.assign({}, ...allStyles())
);

// Our custom binding
ko.bindingHandlers.varStyle = {
  init: (el, va) => {
    ko.computed(() => {
      Object.entries(ko.unwrap(va()))
        .forEach(([prop, val]) => {
          el.style.setProperty(prop, val);
        });
    });
  }
}

ko.applyBindings({
  myStyle: mergedStyle
});

div {
  --my-color: green;
  background: var(--my-color);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="style: {}">Hello world</div>
<div data-bind="style: myStyle">Hello world</div>
<div data-bind="varStyle: myStyle">Hello world</div>