KnockoutJS foreach по отдельному элементу вложенного массива

Question

Я нахожусь в проекте, который пытается отобразить фас-фрагменты поиска для заданного запроса, но правила таковы, что я не могу просто использовать вложенные операторы ko: foreach, так как разные наборы результатов имеют разные правила отображения для их.

Объект Я отображение выглядит следующим образом:

FacetResults: ko.observableArray([ 
{ 
    Term: 'myTerm', 
    Values: [{'key1': 5}, {'key2': 13}] 
}, 
{ Term: 'myTerm2', 
    Values: [{'key3': 6}, {'key4': 42}] 
}]); 

В общем, что я пытаюсь сделать что-то вроде

<!-- ko foreach: FacetResults()[0] --> 
    <span data-bind="text: Term"></span> 
    <ul data-bind="foreach: Values"> 
    <!-- do something --> 
    </ul> 
<!-- /ko --> 

Но я не в состоянии сделать это, не получая «не в состоянии ошибка привязки синтаксического анализа.

Я могу сделать что-то вроде

<span data-bind="text: FacetResults[0]"></span> 

и возвращение «объекта Object», но как только я <span data-bind="text: FacetResults[0[].Term" </span>, я получаю ту же ошибку сломанные привязок.

Я подумал о том, чтобы просто разбить результирующие множества на ряд наблюдаемых массивов, чтобы избежать этого, но это варианты использования, которые не требуют специальной логики представления, где я могу использовать вложенные петли ko: foreach, и поэтому я бы например, придерживаться одного массива, если это возможно (особенно учитывая, что возвращаемые типы данных всегда будут одинаковыми и не позволят мне разобрать их, когда они вернутся с вызова).

Для чего это стоит, я также могу проверять объекты во время выполнения и утверждал, что FacetResults [0] .Term является допустимым полем через console.log (vm.FacetResults() [0] .Term); без проблем.

Любая помощь будет оценена по достоинству. Благодаря!

Answer 1

Я считаю, что вы ищете привязку with.

Связывание со связыванием создает новый контекст связывания, так что элементы-потоки связаны в контексте заданного объекта.

Это должно работать для вас

<!-- ko with: FacetResults()[0] --> 
    <span data-bind="text: Term"></span> 
    <ul data-bind="foreach: Values"> 
    <!-- do something --> 
    </ul> 
<!-- /ko -->