knout.js 中 $parent 的访问索引

Posted 2023-02-24

【中文标题】knout.js 中 $parent 的访问索引

【英文标题】：Access index of $parent in knockout.js

【发布时间】：2012-06-14 06:23:38

【问题描述】：

在 knockout.js 2.1.0 中，在使用 foreach 绑定的模板中，您可以通过 $index() 函数访问当前项目的索引。在嵌套的 foreach 绑定中，有没有办法从模板访问 $parent 的索引？

假设我有这样的数据结构：

var application = 
  topModel: [
    
      subModel: ['foo':'foo',  'bar':'bar'], // this has top:0 and sub:0
      subModel: ['foo2':'foo2',  'bar2':'bar2'] // this has top:0 and sub:1
    ,
    
      subModel: ['foo':'foo',  'bar':'bar'] // this is top:1 sub:0
    ,
    
      subModel: ['foo':'foo',  'bar':'bar'] // this is top:2 sub:0
      subModel: ['foo':'foo',  'bar':'bar'] // this is top:2 sub:1
    ,
    ...
    ];

有了这个，我想使用索引打印每个模型的路径： [topModel-index subModel-index]，所以输出会是这样的：

[0 0]
[0 1]
[1 0]
[2 0]
[2 1]
...

我已经使用 foreach 绑定了模型，但是我不知道如何在 subModel 的上下文中访问 topModel 的索引。以下示例显示了我尝试过的一种方法，但它不起作用，因为我不知道如何访问 $parent referrer 的索引。

<!--ko foreach: topModel -->
<!--ko foreach: subModel -->
  [<span data-bind="text: $parent.index()"></span>
  <span data-bind="text: $index()"></span>]
<!--/ko-->
<!--/ko-->

应该打印出：0 1, 0 2, 1 0, 1 1, 1 2, 2 0, 2 1, ...

【问题讨论】：

在$index 之后你实际上不需要那个()。

另外，如果你可以用你拥有的东西创建一个 jsfiddle，那会更容易。或者发布您的数据源并查看模型代码。

目前，我只从事原型设计，所以我没有比给定示例更多的东西。不过，我愿意接受使用其他方法的建议。

也许描述你正在尝试做的what，而不是如何。可能有不同的方法。

谢谢。我改变了我的问题，希望现在更清楚了吗？

【参考方案1】：

访问父对象的索引使用

$parentContext.$index()

而不是

$parent.index()

【讨论】：

虽然，要以无脑的名义过于明确，您仍然必须使用括号$parentContext.$index()。 ;^) 更多关于 $parentContext here，fwiw。

@ruffin 不适用于 $index，根据 Matthew 对原始问题的评论“在 $index 之后你实际上不需要那个 ()”。 $index 是一个特殊的变量，而不是一个 observable。

谢谢 - 绝对值得注意的是，在复合值的上下文中，您需要添加 () 但是如果您根据问题将元素绑定到 $parentContext.$index '不需要它。

需要括号$parentContext.$index()

只是想补充一点，$parentContext.$parentContext.$index() 也可以按您的预期工作。

【参考方案2】：

你能找到的最简单的方法是下载 chrome 的“knockout context”。这向您显示了哪些数据绑定到了哪些元素，还可以让您查看该特定绑定元素的可用函数/变量。对于此类情况，这是一个了不起的工具。