Вложенный foreach в knockout.js

Кажется, я не могу использовать вложенный файл 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.

Ответ 1

Связывание text, которое у вас на внешней стороне li, переписывает содержимое внутри него, поэтому оно сбрасывает ваш внутренний foreach. Связывание text устанавливает внутренний текст /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>