この記事では、インデックスループインデックスのJSRenderについて説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
JSREDNERとJSVIEWS(JSViewsはJSRenderに基づくさらなるカプセル化です)は、次世代のJQueryテンプレートと呼ばれます。
https://github.com/borismoore/jsrender;
https://github.com/borismoore/jsviews。
ループはテンプレートエンジンの重要な部分であり、ループに関しては、重要な要因が導入されます:インデックス。
いわゆるインデックスは、ループの数です。インデックスを介して、現在のループを何回にするかを取得できます。
読者が公式文書を読んだ場合、インデックスを取得するための次の方法が表示されます。
データ:
次のようにコードをコピーします。{
名前:[「マラドーナ」、「ペレ」、「ロナウド」、「メッシ」]]
}
テンプレートマークアップ:
次のようにコードをコピーします:{{for names}}
<div>
<b> {{:#index+1}}。</b>
<span> {{:#data}} </span>
</div>
{{/のために}}
結果:
次のようにコードをコピーします:1。Maradona
2。ペレ
3。ロナウド
4。メッシ
インデックスは、これと同等の特別なリテラル#indexによってループで取得でき、この場合は各名前を表します。
次に、いくつかのトリックと上記の例を作りましょうが、今回はMで始まる名前のみを表示したいと考えています。
データ:
次のようにコードをコピーします。{
名前:[「マラドーナ」、「ペレ」、「ロナウド」、「メッシ」]]
}
テンプレートマークアップ:
次のようにコードをコピーします:{{for names}}
{{if#data.indexof( "m")== 0}}
<div>
<b> {{:#index+1}}。</b>
<span> {{:#data}} </span>
</div>
{{/もし}}
{{/のために}}
結果:
次のようにコードをコピーします:利用できない(ネストされたビュー):#getIndex()1を使用します。マラドーナ
利用できない(ネストされたビュー):#getIndex()1を使用します。メッシ
IF判断を追加しただけで、実際にエラーを報告しました!
問題は#indexにあります。エラーメッセージは非常に明確です。 #indexの代わりに#getIndex()を使用できます。
交換されたコードを試してください:
データ:
次のようにコードをコピーします。{
名前:[「マラドーナ」、「ペレ」、「ロナウド」、「メッシ」]]
}
テンプレートマークアップ:
次のようにコードをコピーします:{{for names}}
{{if#data.indexof( "m")== 0}}
<div>
<b> {{:#getIndex()+1}}。</b>
<span> {{:#data}} </span>
</div>
{{/もし}}
{{/のために}}
結果:
次のようにコードをコピーします:1。Maradona
4。メッシ
なぜこれがなぜですか?簡単に言えば、{{if}}は通常のデータ範囲を作成しないが、隠された範囲を妨げるためです。つまり、{{if}}は通常のデータ(渡されるデータ)の可視性をブロックしませんが、非表示データの可視性(#index、#parent)に干渉します。これは簡単な理解であり、これに入る必要はありません。これは、このフレームワークの欠陥であり、標準ではないためです。
したがって、この記事には、読者に重要な結論を提供します。#getIndex()を使用してインデックスを取得し、アプリケーションが十分に単純でない限り#indexを使用しないようにしてください。
この記事が皆のJSRenderの学習に役立つことを願っています。