Question

我整个下午一直在foreach查看嵌套knockout循环的示例，但我无法正常工作。我目前的设置，至少是相关部分，如下所示。

视图模型：

var sample = {
    this.pageData = ko.observable();
    this.panels = ko.observableArray();
};

ko.utils.extend(sample.prototype, {
    activate: { 

        this.pageData(sampleData);
        this.panels([
            {
        name: 'column1',
        keys: ['key1', 'key2', 'key3'],
        loadedWidgets: ko.observableArray()
            },
            {
                name: 'column2',
                keys: ['key4', 'key5'],
                loadedWidgets: ko.observableArray()
            },
            {
                name: 'column3',
                keys: ['key6'],
                loadedWidgets: ko.observableArray()
            }
        ]);

        this.loadWidgetPanels(this.panels(), this.pageData());

    },
    loadWidgetPanels: function (panels, pageData) {
            for (var i = 0; i < panels.length; i++) {
                    var screens = filterContentByKey(pageData.Content, panels[i].keys);
                    if (screens) {
                        panels[i].loadedWidgets.push(widgetFactory.getWidgets(screens));
                    }
            }
    }
}

查看：

<div>
    <!-- ko foreach: panels -->
        <div class="3columnStyle">
            <!-- ko foreach: loadedWidgets -->
                <!--ko compose: $data --><!-- /ko -->
            <!-- /ko -->
        </div>
    <!-- /ko -->
</div>

我已经确认我在loadedWidgets中以正确的格式取回了正确的数据，但它们没有显示在视图中。我可以告诉该视图至少知道有多少数据，因为我的DOM为每个小部件都有一个ko compose元素。例如，第一列有一些小部件，并且div中创建了一些小部件。第2列有2个小部件，它有2个compose个元素。第3列有1个小部件，并获得一个元素。它只是不显示小部件本身。我是否需要其他元素或其他绑定？

我有一个不依赖于嵌套循环的工作模型。它不是使用对象数组，而是创建每个可观察数组。换句话说，它不是循环的。而不是一个包含三个对象的数组，每个对象都有自己的数组，我有三个数组：

this.column1Widgets();
this.column2Widgets();
this.column3Widgets();

它们的构造方式相同，只需手动而不是循环。 View看起来更像是这样：

<div class="3columnStyle">
    <!-- ko foreach: column3Widgets -->
        <!-- ko compose: $data --><!-- /ko -->
    <!-- /ko -->
</div>
<div class="3columnStyle">
    <!-- ko foreach: column3Widgets -->
        <!-- ko compose: $data --><!-- /ko -->
    <!-- /ko -->
</div>
<div class="3columnStyle">
    <!-- ko foreach: column3Widgets -->
        <!-- ko compose: $data --><!-- /ko -->
    <!-- /ko -->
</div>

我不确定为什么它不能使用嵌套循环，但由于数据相同，我确信在设置View时我缺少一些东西。

Answer 1

如果没有看到其余的代码，很难确定。我对你的viewmodel中的sample对象有点怀疑。但在我看来，你实际上并没有嵌套你的foreach。

在您看来，请替换

foreach: loadedWidgets

带

foreach: $data.loadedWidgets

您需要以某种方式引用父foreach。 $ data表示父foreach中的当前项，如果我正确理解您的模型，则该项包含loadedWidgets键。

此外，您的案例中不需要无容器绑定。

Answer 2

正如Eric Taylor所说，它必须与无容器绑定有关。我创建了一个带有一些过度简化的对象模型的jsfiddle，但是将我的DOM从上面改为以下内容立即修复了问题：

<div>Test</div>
<div data-bind="foreach: panels">
<ul data-bind="foreach: loadedWidgets">
    <li data-bind="text: $data"></li>
</ul>
</div>

我认为我没有很好地掌握容器如何与绑定相互作用。

knockout.js嵌套在嵌套数组上的foreach

2 个答案: