Knockout.js - foreach binding - test if last element

Question

I am using the following template:

<div class="datatypeOptions" data-bind="if: $data.datatypeTemplate().allowOptions">     <h3>Allowed responses</h3>      <p data-bind="if: $data.datatypeTemplate().datatypeOptions().length == 0">There are no responses for this question, yet. <a href="#" data-bind="click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}">Add one</a>     <ul data-bind="foreach: $data.datatypeTemplate().datatypeOptions()">         <li>             <a href="#" data-bind="text: name, click: $root.selectedDatatypeOption, visible: $data !== $root.selectedDatatypeOption()"></a>             <input data-bind="value: name, visibleAndSelect: $data === $root.selectedDatatypeOption(), event: { blur: $root.clearDatatypeOption }, executeOnEnter: { callback: function(){ $root.addDatatypeOption($parent.datatypeTemplate()); } }" />             //I want to show this a tag only if $data is the last element in the array. Problem here ===>  <a href="#" data-bind="if: $data == $parent.datatypeTemplate().datatypeOptions()[ $parent.datatypeTemplate().datatypeOptions().length - 1 ], click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}"><img src='/static/img/icons/custom-task-wizard/black/plus_12x12.png' title='Add option'></a>         </li>     </ul> </div> 

I get this error in the console:

Uncaught Error: Unable to parse bindings. Message: TypeError: Object [object Object] has no method 'datatypeTemplate'; Bindings value: if: $data == $parent.datatypeTemplate().datatypeOptions()[ $parent.datatypeTemplate().datatypeOptions().length - 1 ], click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());} 

Is my only option to add a function to my viewmodel that returns true/false if the passed element is last in the array?

Answer 1

I've simplified the problem, but this jsFiddle demonstrates a possible solution.

"if" binding:

<div data-bind="if: ($index() === ($parent.data().length - 1))">I'm the last element</div> 

Containerless "if" binding:

<!-- ko if: ($index() === ($parent.data().length - 1)) --> <div>I'm the last element again</div> <!-- /ko --> 

You can use $index within a foreach binding to get the index of the currently bound item. Use that to compare against the original collection of the parent.

See HERE for more information regarding binding contexts.