Question

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

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

“Something”列表
“团体”列表

其中一个组还包含一个“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>

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

小提琴：http://jsfiddle.net/skattefuten/e6s2X/

Answer 1

不使用自定义绑定的一种方法是在模板中移动“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。

Knockout - 从模板内部访问“绑定到”数组的长度

1 个答案: