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

【问题标题】：KnockoutJS foreach loop to limit to first arrayKnockoutJS foreach 循环限制到第一个数组
【发布时间】：2013-03-15 17:03:21
【问题描述】：

我正在使用 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
            }
         ]
      }
   }
}

【问题讨论】：

可能是 data-bind="with: Applications[0]" 而不是 foreach？
试过了，但似乎不起作用。 :-(
您收到错误消息了吗？

标签： knockout.js foreach

【解决方案1】：

APPS 不是一个数组，所以你不能循环遍历它。应用程序是，您可以循环通过它。但是由于您希望它成为第一项，因此只需对 APPS 和应用程序使用 With 绑定即可。

另外，更正 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>

【讨论】：

只有你的小提琴中的第一个绑定 (AppId) 有效。你能更新小提琴，让它们都能正常工作吗？
我想知道为什么这种变化会产生影响。似乎两个版本都应该做同样的事情。但是 +1 让它发挥作用
嗯，是的，也不是。第一个版本，传入的context不知道parent，因为我做这个data-bind="with: bad.Applications[0]的时候，没有$parent。context不存在。当我改了使用：Applications[0] 并将 bad 移到上层，现在我有了父级的上下文（这是“坏”属性），因此现在可以从中读取“名称”属性。
对……这很有道理。不敢相信我错过了哈哈

【解决方案2】：

好的，我用过：

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

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

【讨论】：

不要那样做。您仍将循环浏览整个应用程序。如果你说其中有 100 个，你将循环遍历，对每个项目进行条件检查。相反，只需使用 data-bind="with: bad.Applications[0]"
如果你不能让with 绑定工作，这实际上是我最后的建议。但这是最后的手段，原因正是@SujeshArukil 刚刚指出的