javascript - Knockout - 从模板内部访问数组 "bound to"的长度

Question

我有不同的对象/ View 模型，它们保存相似的数据，但具有不同的属性。

将其视为一个包含 2 个列表的对象；

• “某物”列表
• “群组”列表

其中组还包含“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());

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

<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>

我已经查看了绑定(bind)上下文等，但似乎找不到一个好的方法。也许我需要创建一个自定义绑定(bind)来公开长度和数据？ (希望不是)

fiddle :http://jsfiddle.net/skattefuten/e6s2X/

Answer 1

不使用自定义绑定(bind)的一种方法是在模板中移动“foreach 逻辑”:

<script type="text/html" id="listElement">
    <!-- ko foreach: $data -->
        <li>
            <span data-bind="text: $data">Data</span> - Is number 
            <span data-bind="text: $index()+1">x</span> of <strong>
            <span data-bind="text: $parent.length"></span></strong>
        </li>
    <!-- /ko -->
</script>

然后您可以使用$parent.length来访问数组的长度。

在模板中，您需要使用 data 属性传入数组:

<div>
    <h3>Using a template</h3>
    <hr />
    <ul data-bind="template: { name: 'listElement', data: list1 }"></ul>
    <br />
    <h4>Inside group</h4>
    <span data-bind="foreach: list2">
        <ol data-bind="template: { name: 'listElement', data: anotherList }">
        </ol>
    </span>
</div>

演示 JSFiddle .