title: Knockout - Accessing length of array "bound to" from inside template
body: <p>I have different objects/view models that holds similar data but in different properties.</p>
  
  <p>Think of it as an object holding 2 lists; </p>
  
  <ul>
  <li>List of "Something"</li>
  <li>List of "Groups"</li>
  </ul>
  
  <p>where a group also contains a list of "Something", similar to this</p>
  
  <pre><code>function group(d) {
    this.name = ko.observable(d.name)
    this.anotherList = ko.observableArray(d.data);
  }
  function vm() {
    this.list1 = ko.observableArray([1,2,3,4]);
    this.list2 = ko.observableArray([new group({name:'a', data:[9,8,7,6]})]);
  }
  
  ko.applyBindings(new vm());
  </code></pre>
  
  <p>One requirement is that I must output the posisiton and length of the bound arrays. Currently it is done by repeating the code for each list element, like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;h3&gt;Specific for each list&lt;/h3&gt;
      &lt;hr /&gt;
      &lt;ul data-bind="foreach: list1"&gt;
          &lt;li&gt;
              &lt;span data-bind="text: $data"&gt;Data&lt;/span&gt; - Is number
              &lt;span data-bind="text: $index()+1"&gt;x&lt;/span&gt; of
              &lt;span data-bind="text: $parent.list1().length"&gt;n&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;br /&gt;
      &lt;h4&gt;Inside group&lt;/h4&gt;
      &lt;!-- ko foreach: list2 --&gt;
      &lt;ol data-bind="foreach: anotherList"&gt;
          &lt;li&gt;
              &lt;span data-bind="text: $data"&gt;Data&lt;/span&gt; - Is number
              &lt;span data-bind="text: $index()+1"&gt;x&lt;/span&gt; of
              &lt;span data-bind="text: $parent.anotherList().length"&gt;n&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ol&gt;
      &lt;!-- /ko --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I would like to achieve is to use the same template to render the "bottom" content - the lists. </p>
  
  <pre><code>&lt;div&gt;
      &lt;h3&gt;Using a template&lt;/h3&gt;
      &lt;hr /&gt;
      &lt;ul data-bind="template: { name: 'listElement', foreach: list1 }"&gt;&lt;/ul&gt;
      &lt;br /&gt;
      &lt;h4&gt;Inside group&lt;/h4&gt;
      &lt;span data-bind="foreach: list2"&gt;
          &lt;ol data-bind="template: { name: 'listElement', foreach: anotherList }"&gt;&lt;/ol&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script type="text/html" id="listElement"&gt;
      &lt;li&gt;
          &lt;span data-bind="text: $data"&gt;Data&lt;/span&gt; - Is number
          &lt;span data-bind="text: $index()+1"&gt;x&lt;/span&gt; of &lt;strong&gt;&lt;span&gt;n???&lt;/span&gt;&lt;/strong&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I have looked at the binding context, etc, but can't seem to find a nice way of doing it. Maybe I need to create a custom binding that exposes the length along with the data? (hope not)</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/skattefuten/e6s2X/" rel="nofollow">http://jsfiddle.net/skattefuten/e6s2X/</a></p>