如何正确编码foreach和样式绑定 [英] How to properly code foreach and style binding

问题描述

我在这里准备了一个小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绑定.什么时候可以使用注释" foreach绑定，什么时候可以使用普通的绑定，并且我想知道如何重做我的代码，因此可以从可观察的数组中绑定CSS属性.

谢谢！

解决方案

我已经改变

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

使用

self.segments = ko.observableArray(segments);

请参阅: http://jsfiddle.net/x4a8pkmu/

我想知道应该使用什么foreach绑定.我什么时候可以使用 评论" foreach绑定，何时使用普通的绑定，我会 想知道如何重做我的代码，所以我可以从中绑定CSS属性 细分可观察数组

如果您不想使用容器元素，则注释"语法很有用.例如:

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

产生与以下相同的效果:

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

I have prepared a small jsfiddle here: http://jsfiddle.net/zb8jwre6/

Basically, I have observable array of sliders, and each slider should have it's own observable array of segments, which contain some properties for CSS-binding in HTML.

My first problem is that I'am not sure which foreach bind should i use:

This one doesn't work for some reason:

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

This one works, but I am not sure in which cases should I use this one:

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

My second problem is that I don't know how to apply wanted CSS stylings from segment observable array.

I have tried this:

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

But this does not work. I think I need to make those properties also as observables, but I am not sure how to do this properly in ViewModel

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.

Thank you!

解决方案

I've changed

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

with

self.segments = ko.observableArray(segments);

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

The "comment" syntax is useful if you do not want a container element. For example:

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

produces the same effects as:

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

这篇关于如何正确编码foreach和样式绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！