Как правильно кодировать foreach и привязывать стиль - PullRequest
Новая
       17

Как правильно кодировать foreach и привязывать стиль

0 голосов
/ 22 октября 2019

Я подготовил небольшое 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 следует использовать. Когда я могу использовать «комментарий» foreach bindng, а когда я использую обычный, и я хотел бы знать, как переработать мой код, чтобы я мог связывать свойства CSS из наблюдаемого массива сегментов.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 23 октября 2019
  • Смысл сделать переменную наблюдаемой, если вы собираетесь изменить эти значения на основе взаимодействия с пользователем / ответа сервера, а затем обновить пользовательский интерфейс . Если значения никогда не изменятся, то использование наблюдаемого для свойств стиля не поможет.
  • Существует очень небольшая разница между двумя 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>
0 голосов
/ 23 октября 2019

Я изменил 

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

с 

self.segments = ko.observableArray(segments);

См .: http://jsfiddle.net/x4a8pkmu/

Я хотел бы знать, какую привязку foreach я должениспользовать. Когда я могу использовать «comment» foreach bindng, а когда я использую обычный, и я хотел бы знать, как переработать мой код, чтобы я мог связывать свойства CSS из наблюдаемого массива сегментов

The "Синтаксис комментария полезен, если вам не нужен элемент контейнера. Например: 

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

производит те же эффекты, что и: 

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