javascript - 将数组绑定(bind)到 Knockout 样式绑定(bind)

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);

对于其他(更多浏览器兼容)方式，请在 google/搜索“合并对象数组”。

第2步:设置样式

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

您可以编写一个使用 element.style.setProperty 的快速自定义绑定(bind)在内部添加支持:

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

请务必检查您的边缘情况。

演示:

第一个元素呈现常规，未更改 <div>风格。第二个使用默认的 style绑定(bind)，无法更新自定义属性。第三个元素使用自定义绑定(bind)，更新 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>