Knockout 3 уровня привязки optgroup

Question

Я пытаюсь связать окно выбора / списка, где у меня есть 3 уровня данных, я хочу, чтобы мой вывод выглядел так, как показано ниже

<select>
    <optgroup label="Root 1">
        <optgroup label="Group 1"> 
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </optgroup>
    </optgroup>
    <optgroup label="Root 2">
        <optgroup label="Group 2">
            <option>Option A</option>
            <option>Option B</option>
            <option>Option C</option>
        </optgroup>
    </optgroup>
</select>

И вот как я пытаюсь связать

<div id="termdata">
    <select id="termsList" name="Term" data-bind="foreach: allterms">
        <optgroup data-bind="attr: { label: name}, foreach: termRoot">
            <optgroup data-bind="attr: { label: name},foreach: termGroup">
                <option data-bind="text: name"></option>
            </optgroup>                
        </optgroup>
    </select>
</div>

    var termData = [{
        "name": "Root 1", "termRoot": [{
            "name": "Group 1", "termGroup": [{
                "terms": [{
                    "name": "option 1"
                }, { "name": "option 2" }, { "name": "option 3" }]
            }]
        }]
    }, {
        "name": "Root 2", "termRoot": [{
            "name": "Group 2", "termGroup": [{
                "terms": [{
                    "name": "option A"
                }, { "name": "option B" }, { "name": "option C" }]
            }]
        }]
    }];

    var TermViewModel = function () {
        var self = this;
        self.allterms = ko.observableArray(termData);
    }

    ko.applyBindings(new TermViewModel(), document.querySelector('#termdata'));

Я получаю следующую ошибку

Сообщение: Невозможно обработать привязку "foreach: function () {возвращать условия}" Сообщение: условия не определены

, тогда как в groupTerms существуют термины

Answer 1

Из того, что я вижу, у вас неправильный синтаксис цикла html, и кроме того: вложенные optgroups теоретически неверны и будут в любом случае выровнены при рендеринге dom.Это должно сработать:

<div id="termdata">
    <select id="termsList" name="Term" data-bind="foreach: allterms">
      <optgroup data-bind="attr: {label: name}"></optgroup>
      <!-- ko foreach: { data: termRoot, as: 'root' } -->
        <optgroup data-bind="attr: {label: root.name},
          foreach: { data: root.termGroup[0].terms, as: 'group' }">
          <option data-bind="text: group.name">ds</option>
        </optgroup>
      <!-- /ko -->
    </select>
</div>

Обратите внимание, что termGroup является массивом, поэтому теоретически вы должны также циклически выполнять его (однако я только что использовал первый индекс - root.termGroup[0].terms), тогда как выпытаясь отобразить termGroup.name в вашем синтаксисе, и такого нет, поскольку, как я сказал, termGroup является массивом.