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

Question

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

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

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

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

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

Answer 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'
      });

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

How to iterate over segments and apply style binding

javascript

knockout.js