Javascript 将数组绑定到敲除样式绑定

我有一个可观察的css属性。元素如下所示：

[{
“--边框颜色”：“红色”//（colorName=可观察-colorValue=可观察）
...
}]

我希望避免使用

foreach

创建多个

标记

我需要一些能做这样事情的东西：

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

有什么想法吗？

步骤1：将属性数组合并到单个对象中 有很多方法可以做到这一点，其中我更喜欢使用

Object.assign

和扩展语法：

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

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

步骤2：设置样式 从你财产名称的外观判断，据我所知，你正在使用的财产名称不受

您可以编写一个快速自定义绑定，在内部使用

element.style.setProperty

来添加支持：

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

确保检查您的边缘情况

演示： 第一个元素呈现常规的、未更改的

样式。第二个使用默认的

样式

绑定，无法更新自定义属性。第三个元素使用自定义绑定，更新

颜色和
背景颜色


//我们的样式对象：
const allStyles=ko.array([
{“颜色”：“白色”}，
{--“我的颜色”：“红色”}
]);
const mergedStyle=ko.pureComputed(
（）=>Object.assign（{}，…allStyles（））
);
//我们的定制装订
ko.bindingHandlers.varStyle={
初始：（el，va）=>{
ko.computed（（）=>{
Object.entries（ko.unwrap（va（）））
.forEach（（[prop，val]）=>{
el.style.setProperty（道具，val）；
});
});
}
}
ko.applyBindings({
myStyle:mergedStyle
});
div{
--我的颜色：绿色；
背景：var（--我的颜色）；
}

你好，世界
你好，世界
你好，世界
你是否意外地交换了
{
和
[
？你的css属性格式无效。我的坏兄弟，我会马上修复它