KnockoutJS foreach循环限制到第一个数组

时间:2013-03-15 17:03:22

标签: knockout.js foreach

我正在使用KnockoutJS来渲染JSON。某些结果有超过1个“应用程序”。是否有可能在foreach中使它只能始终返回1?无论谁先出现。

在下面的示例中,TEST1在Applications下有2个结果。我只想在渲染中展示一个。

HTML

<table>
<thead>
<tr>
<th>AppId</th>
<th>Name</th>
<th>App Token</th>

</tr>
</thead>
<tbody data-bind="foreach: { data: APPS, as: 'APP' }">
  <tr data-bind="foreach:  Applications">
    <td><span data-bind="text: appId"></span></td>
    <td><span data-bind="text: $parent.name"></span></td>
    <td><span data-bind="text: AppToken"></span>
  </tr>
</tbody>
</table>

JSON

{
   "APPS":{
      "bad":{
         "Name":"TEST1",
         "Applications":[
            {
               "AppId":"bab",
               "AppToken":null
            },
            {
               "AppId":"bab",
               "AppToken":null
            }
         ]
      },
      "good":{
         "Name":"TEST2",
         "Applications":[
            {
               "AppId":"bab",
               "AppToken":null
            }
         ]
      }
   }
}

2 个答案:

答案 0 :(得分:4)

APPS不是数组,因此您无法循环播放它。应用程序是,你可以循环它。但由于您希望它成为第一个项目,因此只需对APPS和应用程序使用With binding。

另外,更正HTML中绑定的大小写。另一件事,Applications数组不属于“Apps”的“好”或“坏”属性,所以你必须对它进行限定。

这是一个小提琴。

http://jsfiddle.net/sujesharukil/tyJwX/1

<tbody data-bind="with: APPS.bad">
    <tr data-bind="with:  Applications[0]">
        <td><span data-bind="text: AppId"></span></td>
        <td><span data-bind="text: $parent.Name"></span></td>
        <td><span data-bind="text: AppToken"></span></td>
  </tr>
</tbody>

答案 1 :(得分:0)

好的,我用过:

<!-- ko if: $index() === 0 -->

从这里得到答案。 knockout.js using $index with if binding