[解決済み] 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()
関連
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか?
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] コールバック内で正しい `this` にアクセスする方法
-
[解決済み] JavaScriptの正規表現でマッチしたグループにアクセスするにはどうすればよいですか?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?