web-dev-qa-db-ja.com

knockout.jsの$ parentのアクセスインデックス

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リファラーのインデックスにアクセスする方法がわからないため、機能しません。

<!--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、...

javascriptknockout.jsjquery-templates
83
Jørgen

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

$parentContext.$index()

のではなく

$parent.index()
176
Brett Smith

最も簡単な方法は、Chromeの「ノックアウトコンテキスト」をダウンロードすることです。これは、どのデータがどの要素にバインドされているかを示し、その特定のバインドされた要素に使用可能な関数/変数を表示することもできます。これらのような状況には素晴らしいツールです。

3
Julian