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

【问题标题】：How to properly code foreach and style binding如何正确编码 foreach 和样式绑定
【发布时间】：2020-02-18 20:22:35
【问题描述】：

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

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

我的第一个问题是我不确定应该使用哪个 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，什么时候可以使用普通的，我想知道如何修改我的代码，这样我就可以绑定来自segments observable数组的CSS属性。

谢谢！

【问题讨论】：

您在“不工作”绑定中缺少= 登录。也许这就是它不起作用的原因？
愚蠢的错误。感谢您指出。这解决了部分问题，您能帮忙解决其他问题吗？
嗨@johndoe，如果有任何答案解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做

标签： javascript foreach knockout.js binding

【解决方案1】：

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

评论foreach：

<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>

【讨论】：

【解决方案2】：

我变了

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

与

self.segments = ko.observableArray(segments);

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

我想知道我应该使用什么 foreach 绑定。我什么时候可以使用 “评论” foreach 绑定，我什么时候使用普通绑定，我会想知道如何返工我的代码，所以我可以绑定 CSS 属性分段可观察数组

如果您不想要容器元素，“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>

【讨论】：