インデックスループのインデックス使用のためのJsRenderの詳細な説明

この記事の例では、インデックス ループ インデックスに JsRender を使用する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです:

JsRedner と JsViews (JsViews は JsRender に基づいてさらにカプセル化されたものです) は次世代の Jquery テンプレートと呼ばれ、正式アドレス:

https:/ /github .com/BorisMoore/jsrender;
https://github.com/BorisMoore/jsviews。

ループはテンプレート エンジンの重要な部分であり、ループについて話すと、インデックスという重要な要素につながります。

いわゆるインデックスはサイクル数です。インデックスを通じて、現在のサイクルの回数を取得できます。

読者が公式ドキュメントを読んでいる場合は、インデックスを取得する次のメソッドが表示されます:

data:

{
   names: ["Maradona","Pele","Ronaldo","Messi"]
}

template markup:

{{for names}}

{{: #index+1}}.
{{: #data}}

{{/for}}

結果:

1. Maradona
2. Pele
3. Ronaldo
4. Mess

インデックスは、ループ内の特殊なリテラル #index を通じて取得できます。特殊なリテラル #data はこれと同等です。この場合、それぞれの名前を表します。

次に、ちょっとしたトリックを実行しましょう。やはり上記の例ですが、今回は M で始まる名前のみを表示したいとします。

data:

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

テンプレート マークアップ:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    

       {{: #index+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

result:

Unavailable (nested view): use #getIndex()1. Maradona
Unavailable (nested view): use #getIndex()1. Messi

単純にif判定を追加しただけですが、エラーが報告されました。

問題は #index にあります。エラー メッセージは非常に明確で、#index の代わりに #getIndex() を使用するように求められます。

置き換えたコードを試してください:

data:

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

template markup:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    
       {{: #getIndex()+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

result:

1. Maradona
4. Messi

これはなぜですか?簡単に言えば、{{if }} は通常のデータ スコープを作成しませんが、非表示のスコープに干渉するためです。つまり、{{if }} は通常のデータ (渡すデータ) の可視性をブロックしませんが、非表示データ (#index、#parent) の可視性を妨げます。これは簡単な理解であり、これはこのフレームワークの単なる欠陥であり標準ではないため、詳細に入る必要はありません。

したがって、この記事は読者に非常に重要な結論を提供します。インデックスの取得には #getIndex() を使用するようにし、アプリケーションが十分に単純でない限り #index の使用は避けてください。

この章が皆さんの JsRender の学習に役立つことを願っています。その他の関連チュートリアルについては、jQuery ビデオ チュートリアル をご覧ください。