淘汰赛JS中一个foreach循环中的两个数组绑定答案

【问题标题】：Two array binding in one foreach loop in knockout JS淘汰赛JS中一个foreach循环中的两个数组绑定
【发布时间】：2013-06-13 20:41:36
【问题描述】：

请看下面我的视图模型：

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。

【问题讨论】：

标签： knockout.js

【解决方案1】：

可以这样想：$index 是 observable，$index() 是 observable 的值。您需要为 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，他只是使用这个示例以不同的格式帮助我解决同一个问题。

【讨论】：

【解决方案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/

【讨论】：

这个解决方案按预期工作，但我猜@RoyalleBlue 在基本实现方式方面有更好的解决方案。感谢帮助。 :-)

【解决方案3】：

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

另外，它在父对象上，所以试试：

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

【讨论】：

谢谢，我编辑了属性名称。还是不行，求大神帮忙。
我收到以下错误：错误：无法解析绑定。消息：ReferenceError：TeacherNames 未定义；绑定值： text:TeacherNames[$index] 。我也尝试在以下绑定： data-bind="text:$parent.TeacherNames[$index]" 。在这种情况下，它没有显示任何错误，只是没有按预期显示数据。
正如我在上面的评论中提到的，我也试过这个： data-bind="text:$parent.TeacherNames[$index]" ，它没有显示任何错误，只是没有显示数据符合预期。
这个答案忽略了$index 是一个可观察的事实。

【解决方案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/

【讨论】：

这个答案忽略了$index是一个可观察的事实。