Question

Simple question: In the ViewModel I have an array of values that I want to iterate over, let’s call them ‘jobs’. Each job is {type: myType, name: myName}.
I want to put an <hr /> between job types to separate them. I tried the following, but I think something is screwed up with my syntax:

<!-- ko foreach: jobs -->
  <div class="job" data-bind="text: name"></div>
  <!-- ko if: ($index() > 0 && $parent[$index()].type != $parent[$index() - 1].type) -->
    <hr />
  <!-- /ko -->
<!-- /ko -->

Without the <!-- ko if --> it all works well, and I get a nice list.
With that if, I’m getting the first 2 jobs names printed, followed by an hr (wrong, since I have 6 jobs of the first type), followed by this error:

Uncaught Error: Unable to parse bindings.
Message: TypeError: Cannot read property ‘type’ of undefined;
Bindings value: if: ($index() > 0 && $parent[$index()].type != $parent[$index() – 1].type)

For the record, there are 18 jobs, of 3 different types.
What am I doing wrong?

Answer 1

The $parent in this context is the object that contains the property jobs. So you’d have to index into the $parent.jobs.

<!-- ko if: ($index() > 0 && $data.type != $parent.jobs[$index() - 1].type) -->
    <hr />
<!-- /ko -->