如何迭代段并应用样式绑定答案

【问题标题】：How to iterate over segments and apply style binding如何迭代段并应用样式绑定
【发布时间】：2019-10-22 22:12:12
【问题描述】：

我在这里准备了一个小演示：http://jsfiddle.net/chk1vwot/

基本上，我有一个可观察的滑块数组，每个滑块都应该有它自己的可观察段数组，其中包含一些用于 HTML 中的 CSS 绑定的属性。

我正在尝试遍历所有段并应用样式绑定：

<div data-bind="foreach: root.segments">
<div class='slider-segment' data-bind= "style: {left: segment_left, 
width: segment_width, backgroundColor: segment_color}"></div>

但这不起作用。我究竟做错了什么？我可以为此更好地组织我的 ViewModel 吗？

【问题讨论】：

尝试删除此行上的[ 和]，因为segments 已经是一个数组：self.segments = ko.observableArray([segments]);
试过了，还是不行
How to properly code foreach and style binding的可能重复

标签： javascript knockout.js

【解决方案1】：

blex 说的是正确的。但在那之后，您还必须为每个部分指定一个高度。所以我添加了一个高度属性：Fiddle

HTML：

<div class='slider-segment' data-bind= "style: {left: segment_left, 
                                        width: segment_width, 
                                        backgroundColor: segment_color, 
                                        height: segment_height}"></div>

JS：

segment_array.push({
        segment_left: left,
        segment_width: width,
        segment_color: color,
        segment_height: '10px'
      });

【讨论】：