1. ホーム
  2. javascript

[解決済み] knockout.jsで$parentのインデックスにアクセスする

2023-04-11 11:17:19

質問

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 を使用してモデルをバインドしましたが、サブモデルのコンテキストで 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, ...

どのように解決するのですか?

親オブジェクトのインデックスにアクセスするには

$parentContext.$index()

よりも

$parent.index()