嵌套的foreach在knockout.js

Question

我似乎无法得到一个嵌套的foreach工作。

JS代码：

$(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是：

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

外循环正确渲染，但我从内环路，甚至不是一个错误消息罢了。我已检查并填充了chartViewModel上的值字段。

Answer 1

text您在外部li上绑定的text覆盖了它内部的内容，所以它吹走了你内心的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>