knockout.js 중첩 배열의 foreach 중첩

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(); 

이들은 루핑 대신 수동으로 구성됩니다. 그리고 더보기 다음과 같습니다

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

나는 그것이 중첩 된 루프 작동하지 않는 이유를 잘 모르겠지만, 데이터가 동일하기 때문에, 내가 위로 설정에서 누락 뭔가가있을거야 전망.

Answer 1

에릭 테일러 (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> 

아직.

Answer 2

코드의 나머지 부분을 보지 않아도 확실히 알기는 어렵습니다. viewmodel의 sample 개체에 대해 조금 의심 스럽습니다. 하지만 당신이 실제로 당신의 foreach을 중첩하지 않는 것 같습니다. 보기에

, 당신은 어떤 방법으로 부모 foreach를 참조 할 필요가

foreach: $data.loadedWidgets 

와

foreach: loadedWidgets 

를 교체합니다. $ 데이터는 부모 foreach에있는 현재 항목을 나타내며 모델이 올바르게 이해되면 해당 항목에 loadedWidgets 키가 들어 있습니다.

또한 케이스에 컨테이너없는 바인딩이 필요하지 않습니다.