Knockout-访问数组的长度“;绑定到“;来自模板内部

我有不同的对象/视图模型，它们包含相似的数据，但具有不同的属性。

把它想象成一个包含两个列表的对象；

• "某事"列表
• "组"列表

其中一个组还包含一个"Something"列表，类似于这个

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());

一个要求是我必须输出绑定数组的位置和长度。目前，它是通过重复每个列表元素的代码来完成的，如下所示：

<div>
    <h3>Specific for each list</h3>
    <hr />
    <ul data-bind="foreach: list1">
        <li>
            <span data-bind="text: $data">Data</span> - Is number
            <span data-bind="text: $index()+1">x</span> of
            <span data-bind="text: $parent.list1().length">n</span>
        </li>
    </ul>
    <br />
    <h4>Inside group</h4>
    <!-- ko foreach: list2 -->
    <ol data-bind="foreach: anotherList">
        <li>
            <span data-bind="text: $data">Data</span> - Is number
            <span data-bind="text: $index()+1">x</span> of
            <span data-bind="text: $parent.anotherList().length">n</span>
        </li>
    </ol>
    <!-- /ko -->
</div>

我想要实现的是使用相同的模板来呈现"底部"内容——列表。

<div>
    <h3>Using a template</h3>
    <hr />
    <ul data-bind="template: { name: 'listElement', foreach: list1 }"></ul>
    <br />
    <h4>Inside group</h4>
    <span data-bind="foreach: list2">
        <ol data-bind="template: { name: 'listElement', foreach: anotherList }"></ol>
    </span>
</div>
<script type="text/html" id="listElement">
    <li>
        <span data-bind="text: $data">Data</span> - Is number
        <span data-bind="text: $index()+1">x</span> of <strong><span>n???</span></strong>
    </li>
</script>

我看了绑定上下文等，但似乎找不到一个好的方法。也许我需要创建一个自定义绑定，将长度和数据一起公开？（希望不是）

Fiddle：http://jsfiddle.net/skattefuten/e6s2X/