4

请看下面我的视图模型：

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>

请检查这个小提琴。

4

4 回答 4

2

可以这样想：$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()。

我用应用的更改复制了你的小提琴。

另外，感谢Calvin，他只是使用这个例子以不同的格式帮助我解决同一个问题。

于 2013-06-10T20:01:26.180 回答
2

foreach仅使用绑定时，RoyalleBlue 的答案是正确的。但是使用我的重复绑定将使您的绑定代码更清晰：

<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/

于 2013-06-10T22:03:17.060 回答
1

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

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

data-bind="text:$parent.TeacherNames[$index()]"
于 2013-05-13T12:38:58.157 回答
-1

编辑：范围（上下文）是错误的。您可以使用 $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/

于 2013-06-10T12:33:20.710 回答