knockout.js嵌套foreach上嵌套数组

我一直在寻找嵌套foreach循环的例子在knockout整个下午，我一直没有能够得到任何工作。我目前的设置，至少是相关的部分，如下。knockout.js嵌套foreach上嵌套数组

视图模型：

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元素。例如，第一列有少量小部件，并且该小部件是用一些小部件创建的。第2列有2个小工具，它有2个compose元素。第3列有1个小部件并获取一个元素。它只是不显示小部件本身。我是否需要额外的元素或附加的绑定？

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

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

他们的构造相同的方式，只是改为手动循环。和视图看上去更像是这样的：

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

我不知道为什么它不与嵌套循环工作，但由于该数据是相同的，我敢肯定有我丢失的东西在设立视图。

来源

2014-02-21 tmoore82

你可以让一个jsfiddle，jsbin或plunker显示你的问题？这会帮助你更容易。 –

您是否尝试过使用非无容器绑定（即将'foreach'绑定到div中）？我会这样做，然后使用chrome的knockout上下文调试器来查看是否有什么好玩的事情发生...... – gerrod

正如埃里克泰勒所说，它必须与无容器装订有关。我创建了一些过于简单的对象模型一jsfiddle，但是从上面的改变了我的DOM到紧随其后的解决了该问题：

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

我不认为我的容器如何与互动结合，把握好然而。

来源

2014-02-27 03:27:18 tmoore82

没有看到你的代码的其余部分，很难说清楚。我对你的viewmodel中的sample对象有点怀疑。但在我看来，你实际上并没有嵌套你的foreach的。

在你看来，与

foreach: $data.loadedWidgets

更换

foreach: loadedWidgets

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

另外，您的情况下无需无容器绑定。

来源

2014-02-25 04:53:27

显然这不是嵌套问题。这是无容器的约束。嵌套工作，因为我有它，但关于无容器装订的提示导致我的答案。只需要找出用我的实际DOM来做到这一点的最佳方法。谢谢！ – tmoore82

knockout.js嵌套foreach上嵌套数组

回答

相关问题