Knockout Foreach boucle rendant trop d'éléments

J'utilise un knockout foreach boucle pour rendre un ensemble de divs, la boucle fonctionne mais il rend chacun des éléments du tableau trois fois (qui est la longueur du tableau) avant le rendu la rangée suivante.Knockout Foreach boucle rendant trop d'éléments

<div data-bind="foreach: { data: activitySubList } "> 
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div> 
    </div> 
</div>

le balisage résultant ressemble à ceci:

<div data-bind="foreach: { data: activitySubList, includeDestroyed: false }"> 
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>       
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div> 
</div>

En bref, la boucle est rendu chaque élément du array.length() (dans ce cas 3 fois) avant de rendre l'élément suivant.

EDIT: activitySubList est un koobservableArray avec 3 éléments.

EDIT 2: Je réalise que cette question n'a pas vraiment été posée correctement, mais le problème a été résolu. Il a fini par n'avoir rien à faire avec le pour chaque boucle, mais que la forme elle-même était liée plusieurs fois créant les données répétées

Source

2017-08-30 Stizz1e

Je pense que vous devez vraiment pouvoir répliquer ceci dans un [mcve] pour obtenir une bonne réponse ou explication. –

Montrer ce qu'est 'activitySubList' ... comment il est construit, comment il est peuplé, ce qu'il est, etc. –

car activitySubList est plein d'informations spécifiques à l'entreprise, je ne peux pas vraiment le montrer, mais comme indiqué dans mon edit it est un tableau observable Knockout qui est peuplé de trois éléments, je peux dire que cela fonctionne en le regardant dans la montre de studio visuel, la boucle rend cependant neuf lignes quand il ne devrait rendre que trois – Stizz1e

Vous ne fournissez pas une implémentation esquissée de votre liaison de données, comme d'autres l'ont commenté . En supposant que 'activitySubList' est votre var, avez-vous essayé cela?

<div data-bind="foreach: activitySubList">

Source

2017-08-30 17:03:43 jonach

Ou ceci: <- ko foreach: activitySubList -> Probablement devrait jeter un oeil à docs knock-out http://knockoutjs.com/documentation/foreach-binding.html – WiseGuy

Knockout Foreach boucle rendant trop d'éléments

Répondre

Questions connexes