Два массива связывания в одном цикле Еогеасп в нокауте JS

Question

Пожалуйста, посмотрите на мой взгляд, модели ниже:

viewModel = [ 
{ 
    StudentName : 'Ronald', 
    Reviews : [ '3/5', '2/5', '4/5'], 
    TeacherNames : [ 'Nema', 'Sarah', 'Vilson'] 
    }, 
{ 
    StudentName : 'Chris', 
    Reviews : [ '4.5/5', '2.5/5', '3.5/5'], 
    TeacherNames : [ 'Nema', 'Sarah', 'Vilson'] 
} 
] 

В ниже HTML Я пытаюсь отобразить обзоры в вложенной структуры Еогеасп. Отзывы отображаются в зависимости от ожидания. но как я могу разместить TeacherNames вместе с этим единственным обзором? Я положил TeacherNames[$index], но он не работает.

Примечание 1: Число элементов в массиве (например, Обзоры и имена учителей) будет таким же.

Примечание 2: Я не хочу изменять структуру этой модели JSON, что-то вроде добавления дополнительной переменной и размещения обоих параметров в одном массиве.

<div data-bind="foreach:viewModel"> 
    <span data-bind="text: StudentName"></span> 
    <ul data-bind="foreach:Reviews"> 
     <li> 
     <a href="#" data-bind="text:$data">Inbox </a> 
     <span class="ui-li-count" data-bind="text:TeacherNames[$index]">123</span> 
     </li> 
    </ul> 
</div> 

Пожалуйста, проверьте это Fiddle.

Answer 1

Думай об этом так: $index является наблюдаемым, и $index() является значение наблюдаемой. Вам нужно указать массив TeacherNames, а не наблюдаемый.

Использование

<span data-bind="text:$parent.TeacherNames[$index()]" >123</span>

вместо

<span data-bind="text:$parent.TeacherNames[$index]" >123</span>

для доступа к значению $index().

Я сделал копию вашего fiddle with the changes applied.

Кроме того, спасибо Calvin, которые просто использовали этот пример, чтобы помочь мне по одному и тому же вопросу в другом формате.

Answer 2

Ваша собственность называется TeacherNames, но вы называете ее именем TeacherName.

Кроме того, он находится на родительский объект, так что попробуйте:

data-bind="text:$parent.TeacherNames[$index()]" 

Answer 3

EDIT: Область (контекст) является неправильным. Вы можете получить доступ к TeacherNames с $ parent или $ root.

Изменено:

<span data-bind="text:TeacherNames[$index()]" >123</span> 

To:

<span data-bind="text:$parent.TeacherNames[$index()]" >123</span> 

http://jsfiddle.net/calvinslusarski/7xuKX/2/

Answer 4

Ответ RoyalleBlue верен при использовании только привязки foreach. Но с помощью моего Repeat связывания сделает ваше связывание код намного чисты:

<ul> 
    <li data-bind="repeat:Reviews.length"> 
    <a href="#" data-bind="text:Reviews[$index]"></a> 
    <span data-bind="text:TeacherNames[$index]"></span> 
    </li> 
</ul> 

http://jsfiddle.net/mbest/p2kHU/