我有一个 css 属性的 observableArray。元素是这样的:
[{
"--border-color": "red" //(colorName = observable - colorValue = observable)
...
}]
我想避免使用 foreach
创建多个<style>
标签。
我需要一些可以做这样的事情的东西:
data-bind="style: colorStyles" //colorStyles = array mentioned above
有什么想法吗?
最佳答案
第 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>
关于javascript - 将数组绑定(bind)到 Knockout 样式绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51097993/