Nested foreach in knockout.js

Question

Tôi dường như không thể có được một foreach lồng nhau để làm việc.

mã JS là:

$(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 là:

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

Các vòng lặp bên ngoài làm cho chính xác, nhưng tôi nhận được gì từ vòng lặp bên trong, thậm chí không phải là một thông báo lỗi. Tôi đã kiểm tra và trường giá trị trên chartViewModel được điền.

Answer 1

Các ràng buộc text mà bạn có trên bên ngoài của bạn li là ghi đè lên nội dung bên trong của nó, do đó, nó thổi đi bên trong của bạn foreach. Liên kết text đặt innerText/textContent của phần tử, sẽ ghi đè các con hiện tại.

Bạn muốn làm một cái gì đó như:

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