knockout.js - 循环遍历同一个数组两次？

Question

我有这样的视图模型，

        function viewModel() {
            this.Items = ['A', 'B', 'C'];
        }

        ko.applyBindings(new viewModel());

我想打印这样的东西，

    <div data-bind="foreach: {data: Items, as: 'item1' }">
        <span data-bind="text: item1"></span>
        <div data-bind="foreach: {data: Items, as: 'item2' }">
            <span data-bind="text: item2"></span>
        </div>          
    </div>

上述方法不起作用，我收到一条错误消息，提示未定义项目（在我第二次尝试使用它的那一行）。

所以，我想我会试试这个，

        function viewModel() {
            this.Items1 = ['A', 'B', 'C'];
            this.Items2 = ['A', 'B', 'C'];
        }

        ko.applyBindings(new viewModel());

    <div data-bind="foreach: {data: Items1, as: 'item1' }">
        <span data-bind="text: item1"></span>
        <div data-bind="foreach: {data: Items2, as: 'item2' }">
            <span data-bind="text: item2"></span>
        </div>          
    </div>

我收到语法错误。我究竟做错了什么？

谢谢。

Answer 1

您需要更改内部循环的上下文：（示例基于您的原始意图）

<div data-bind="foreach: {data: Items, as: 'item1' }">
    <span data-bind="text: item1"></span>
    <div data-bind="foreach: {data: $parent.Items, as: 'item2' }">
        <span data-bind="text: item2"></span>
    </div>          
</div>

Answer 2

如果您想要完成的只是吐出数组中的每个值，只需将您的标记更改为：

<div data-bind="foreach: {data: Items, as: 'item1' }">
    <span data-bind="text: item1"></span>        
</div>

这是 jsFiddle：http: //jsfiddle.net/dymAQ/1/