Access index of $parent in knockout.js

Question

In knockout.js 2.1.0, in a template using the foreach binding, you can access the current item's index though the $index() function. In a nested foreach binding, is there any way to access the index of the $parent from a template?

Say I have a data structure like this:

var application = {
  topModel: [
    {
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]}, // this has top:0 and sub:0
      {subModel: [{'foo2':'foo2'}, { 'bar2':'bar2'}]} // this has top:0 and sub:1
    },
    {
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:1 sub:0
    },
    {
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:2 sub:0
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:2 sub:1
    },
    ...
    ]};

With this, I want to print the path to each model, using indices: [topModel-index subModel-index], so that the output will be something like:

[0 0]
[0 1]
[1 0]
[2 0]
[2 1]
...

I have bound the models using foreach, but I can't figure out how to access the topModel's index in the context of the subModel. The following example shows an approach I have tried, but it doesn't work, as I can't figure out how to access the index of the $parent referrer.

<!--ko foreach: topModel -->
<!--ko foreach: subModel -->
  [<span data-bind="text: $parent.index()"></span>
  <span data-bind="text: $index()"></span>]
<!--/ko-->
<!--/ko-->

Should print out: 0 1, 0 2, 1 0, 1 1, 1 2, 2 0, 2 1, ...

Also, if you could create a jsfiddle with what you have, that would make it easier. Or post your data source and view model code. — Matthew Schinckel, Jun 11 '12 at 10:57
As for now, I'm only working on prototyping, so I don't have much more than the given example. I'm open to suggestions using other approaches, though. — Jørgen, Jun 11 '12 at 11:04
Maybe describe _what_ you are trying to do, rather than _how_. There may be a different approach. — Matthew Schinckel, Jun 11 '12 at 11:05
Thanks. I changed my question, and hopefully it's more clear now? — Jørgen, Jun 11 '12 at 11:35
Possibly. But why do you need the indexes? The may be a totally different way of solving your problem. — Matthew Schinckel, Jun 11 '12 at 11:52
My challenge is that I need to apply a class to the submodels based on their parent's position in the list, i.e. all odd indexed topModels' subModels. — Jørgen, Jun 11 '12 at 12:08
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/12386/discussion-between-matthew-schinckel-and-jorgen) — Matthew Schinckel, Jun 11 '12 at 12:16

score 191 · Accepted Answer · edited Feb 14 '16 at 21:57

191

to access the index of the parent object use

$parentContext.$index()

rather than

$parent.index()

edited Feb 14 '16 at 21:57

Beau Nouvelle

6,962
3
39
54

answered Jun 13 '12 at 10:56

Brett Smith

2,992
1
20
22

14

Though, to be overly explicit in the name of brainlessness, you still have to `$parentContext.$index()` with the parens. ;^) A little more on $parentContext [here](http://www.appliness.com/10-things-to-know-about-knockout-js-on-day-one/), fwiw. – ruffin Jul 22 '13 at 16:20
@ruffin not for $index, as per Matthew's comment on the original question "you don't actually need that () after the $index there." $index is a special variable rather than an observable. – Brett Smith Jul 22 '13 at 21:34
When I used `$parentConsent.$index` sans `()` in a template, I get the function underlying it through an implicit `toString`. Working code snippet (that doesn't eval to the function's string representation): `attr: { id: 'field' + $parentContext.$index() + '-' + $index() }"` – ruffin Jul 23 '13 at 18:44
3

thanks - definitely worth noting, in the context of a composite value you would need to add the () however if you were binding an element to the $parentContext.$index as per the question you don't need it. – Brett Smith Jul 23 '13 at 23:24
5

Need parentheses `$parentContext.$index()` – Jaider Nov 09 '13 at 02:06
4

Just wanted to add that `$parentContext.$parentContext.$index()` works as you would expect too. – Ryan Wheale Nov 24 '14 at 00:42

score 3 · Answer 2 · answered May 16 '16 at 07:15

The easiest way you can find out is download "knockout context" for chrome. This shows you what data is bound to what element and also lets you see the available functions/variables to that particular bound element. It's an amazing tool for situations like these.

Access index of $parent in knockout.js

2 Answers2

Linked