knockout.js의 중첩 된 foreach

Question

중첩 된 foreach가 작동하지 않는 것 같습니다.

<ul data-bind="foreach: chartsData "> 
    <li data-bind="text: name"> 
     <ul data-bind="foreach: values"> 
      <li data-bind="text: price"> 
      </li> 
     </ul> 
    </li> 
</ul> 

외부 루프가 제대로 렌더링하지만 내부 루프, 심지어 오류 메시지에서 아무것도 얻을 :

$(document).ready(function() { 

    function chartValueViewModel(date, price) { 
     this.date = date; 
     this.price = price; 
    } 

    function chartViewModel(id, name, lineType, values) { 
     this.id = id; 
     this.name = name; 
     this.lineType = lineType; 
     this.values = ko.observableArray(values); 
    } 

    function liveCurveViewModel() { 

     this.chartsData = ko.observableArray([]); 
     var chartsData = this.chartsData; 

     this.init = function() { 

      var mappedCharts = $.map(chartValues, 
      function(chart) { 
       var mappedValues = $.map(chart.chartValues, function(value) { 
        return new chartValueViewModel(value.dateTime, value.price); 
       }) 
       return new chartViewModel(chart.id, chart.name, chart.liveCurveTypeId, mappedValues); 
      }); 

      chartsData(mappedCharts); 
     }; 
    } 

    var vm = new liveCurveViewModel(); 
    vm.init(); 
    ko.applyBindings(vm); 

}); 

HTML은 다음과 같습니다

JS 코드입니다. 내가 확인한 및 chartViewModel 값 필드가 채워집니다.

Answer 1

외부에있는 li 바인딩은 내용을 덮어 쓰고 있으므로 내면이 foreach입니다. text 바인딩은 현재 자식을 덮어 쓰는 요소의 innerText/textContent를 설정합니다. 외부 리튬 텍스트 내부에 덮어 쓰기 바인딩 왜 유 설명해야

<ul data-bind="foreach: chartsData "> 
    <li> 
     <span data-bind="text: name"></span> 
     <ul data-bind="foreach: values"> 
      <li data-bind="text: price"> 
      </li> 
     </ul> 
    </li> 
</ul>