knockout.js using $index with if binding

knockout.js using $index with if binding

I’m trying to show some mark up based on the value of $index, I can display the value but I can’t seem to use it with an if binding, what’s the best approach here?

some mark up here

Solutions/Answers:

Solution 1:

$index is an observable, and observables are functions. When you use observables in an expression you must use the () form to access the value.

<!-- ko if: $index() === 0 -->

Solution 2:

From the knockout bindings page

$index (only available within foreach bindings)

This is the zero-based index of the current array entry being rendered
by a foreach binding. Unlike the other binding context properties,
$index is an observable and is updated whenever the index of the item
changes (e.g., if items are added to or removed from the array).

Example

<div data-bind="foreach: details.additionalDetails">
    <!-- ko if: $index() !== 0 -->
        <span> | </span>
     <!-- /ko -->
        <span data-bind="text: name"></span> <span data-bind="text: value"></span>
</div>

Results in

Model #: UAI5021 | Catalog #: UIOY786

Related:  Disabling some jQuery global Ajax event handlers for a request