javascript - Checking an if condition in a foreach only at the last index -
hi have situation have observable array of observable arrays.this markup looks like:
<div class="slider-wrap cycle-slideshow" data-cycle-fx="scrollhorz" data-cycle-timeout="0" data-cycle-slides="> section" data-cycle-prev=".slider-nav .prev" data-cycle-next=".slider-nav .next" data-cycle-pager=".slider-bullets" data-bind="foreach: category().questions()"> <section data-bind="foreach: $data"> <article> <!-- ko if: hasgrade--> <header data-bind="text: $data.description"></header> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul> <span data-bind="text: $parent.$index"></span> <!-- /ko --> <!-- ko if: hasmemo--> <header data-bind="text: $data.memotitle"></header> <textarea></textarea> <!-- /ko --> </article> <!-- /ko --> <!-- ko if: $parent.$parent.hasmemo--> <article> <header data-bind="text: $parent.$parent.memotitle"></header> <textarea></textarea> </article> <!-- /ko --> </section> </div> i can not change structure of markup because of plugin using , not have luxury of not using it.
the last if condition should checked when last element iterated.this model:
{ memo: null, categoryid: 1, title: "docent", hasmemo: true, memoismandatory: false, memotitle: "docent opmerkingen", questions: [ [ { memo: null, grade: null, description: "de docent goed voorbereid", memotitle: "de docent goed voorbereid", questionid: 11, hasgrade: false, hasmemo: true, showonlymemo: true }, { memo: null, grade: null, description: "de docent heeft kennis van zaken", memotitle: "de docent heeft kennis van zaken", questionid: 12, hasgrade: true, hasmemo: false, showonlymemo: false }, { memo: null, grade: null, description: "de docent kan de onderwerpen boeiend uitleggen", memotitle: "de docent kan de onderwerpen boeiend uitleggen", questionid: 13, hasgrade: true, hasmemo: false, showonlymemo: false }, { memo: null, grade: null, description: "de docent gaat goed in op de vragen uit de groep", memotitle: "de docent gaat goed in op de vragen uit de groep", questionid: 14, hasgrade: true, hasmemo: false, showonlymemo: false }, { memo: null, grade: null, description: "de docent stimuleert de groep tot actieve deelname", memotitle: "de docent stimuleert de groep tot actieve deelname", questionid: 15, hasgrade: true, hasmemo: false, showonlymemo: false } ], [ { memo: null, grade: null, description: "de docent voegt inhoudelijk iets toe aan het studiemateriaal", memotitle: "de docent voegt inhoudelijk iets toe aan het studiemateriaal", questionid: 16, hasgrade: true, hasmemo: false, showonlymemo: false }, { memo: null, grade: null, description: "de docent praktijkgericht", memotitle: "de docent praktijkgericht", questionid: 17, hasgrade: true, hasmemo: false, showonlymemo: false }, { memo: null, grade: null, description: "totaal oordeel on de docent", memotitle: "totaal oordeel on de docent", questionid: 18, hasgrade: true, hasmemo: false, showonlymemo: false } ] ] }, { memo: null, categoryid: 7, title: "opbouw programma en studiemateriaal", hasmemo: true, memoismandatory: false, memotitle: "opbouw programma en studiemateriaal opmerkingen", questions: [ [ { memo: null, grade: null, description: "het studieprogramma duidelijk opgebouwd", memotitle: "het studieprogramma duidelijk opgebouwd", questionid: 54, hasgrade: true, hasmemo: false, showonlymemo: false }, { memo: null, grade: null, description: "het studiemateriaal compleet, goed leesbaar en praktijkgericht", memotitle: "het studiemateriaal compleet, goed leesbaar en praktijkgericht", questionid: 55, hasgrade: true, hasmemo: false, showonlymemo: false } ] ] } ] in our case it's element questionid 55.is there way achieve this?
within foreach binding can use special $index variable refer position in loop. check simple.
<!-- ko if: $parent.$parent.hasmemo() && $index() + 1 === $parent.length --> <article> <header data-bind="text: $parent.$parent.memotitle"></header> <textarea></textarea> </article> <!-- /ko --> note when use complex js expression in binding (as opposed name of single observable or variable) need unwrap observables explicitly. hence parentheses in $index() , $parent.$parent.hasmemo().
Comments
Post a Comment