如何正确编码 foreach 和样式绑定

Question

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

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

我的第一个问题是我不确定应该使用哪个 foreach 绑定：

由于某些原因，这个不起作用：

<div data-bind "foreach: $root.sliders">
   <p data-bind="text: day"></p>
</div>

这个可以用，但我不确定在什么情况下应该使用这个：

<!-- ko foreach: sliders-->
   <p data-bind="text: day"></p>
<!-- /ko -->

我的第二个问题是我不知道如何从段可观察数组中应用想要的 CSS 样式。

我试过这个：

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

但这不起作用。我认为我需要将这些属性也作为可观察对象，但我不确定如何在 ViewModel

中正确执行此操作

我想知道应该使用什么 foreach 绑定。我什么时候可以使用 "comment" foreach bindng，什么时候可以使用普通的 bindng，我想知道如何修改我的代码，以便我可以从 segments observable 数组绑定 CSS 属性。

谢谢！

Answer 1

我变了

self.segments = ko.observableArray([segments]);

和

self.segments = ko.observableArray(segments);

见： http://jsfiddle.net/x4a8pkmu/

I would like to know what foreach binding should I use. When can I use "comment" foreach bindng and when do I use normal one, and I would like to know how to rework my code, so I can bind CSS properties from segments observable array

如果您不需要容器元素，"comment" 语法很有用。例如：

<ul>
<!-- ko foreach: myList -->
    <li data-bind="text: myProp"></li>
<!-- /ko -->
</ul>

产生与以下相同的效果：

<ul data-bind="foreach: myList">
    <li data-bind="text: myProp"></li>
</ul>

Answer 2

使变量成为可观察变量的关键在于，如果您要根据用户 interaction/server 响应更改这些值，然后 更新 UI.如果值永远不会改变，那么对样式属性使用 observable 是没有帮助的。
两个 foreach 循环之间有一个非常小的区别 - 'Comment' foreach 在重复的子标签周围没有父 div 标签，而另一个有。所以输出看起来像：

每个评论：

<p>MON</p>
<p>TUE</p>
<p>WED</p>

Div foreach:

<div>
    <p>MON</p>
    <p>TUE</p>
    <p>WED</p>
</div>

foreach 的注释对以下情况很有用：

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

如何正确编码 foreach 和样式绑定

How to properly code foreach and style binding

javascript

foreach

binding

knockout.js