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中，我试图在嵌套的foreach结构中显示评论。评论按期望显示。但是如何将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数组赋予数字，而不是observable。

使用

<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

当仅使用foreach绑定时，RoyalleBlue的答案是正确的。但使用我的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/

Answer 3

您的属性名为TeacherNames，但您将其称为TeacherName。

此外，它位于父对象上，请尝试：

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

Answer 4

编辑：范围（上下文）是错误的。您可以使用$ parent或$ root访问TeacherNames。

已更改：

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

要：

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

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

在敲除JS中的一个foreach循环中的两个数组绑定

4 个答案: