この記事は、JSRenderの実用的な入門チュートリアルです。例として、タグElseの使用や親データへのネストされたアクセスをループするなどの知識ポイントについて説明します。参照のためにそれを共有してください。詳細は次のとおりです。
序文
JSRenderは、jQueryに基づくJavaScriptテンプレートエンジンです。次の機能があります。
・シンプルで直感的です
・強力
extensible拡張
rightning稲妻と同じくらい速い
これらの機能は驚くほどに見えますが、ほぼすべてのテンプレートエンジンがこのように宣伝されます。 。 。
作業のニーズにより、Xiaocaiはこのテンプレートエンジンと接触しました。しばらく使用した後、私はそれが本当に非常に強力であることがわかりましたが、Xiaocaiはいくつかの場所が強すぎると感じているため、人々は理解するのが難しいと感じています。
一方、JSRenderの公式文書は比較的詳細ですが、驚くほど他の情報はほとんどありません。問題が発生した場合は、基本的に検索できません。関連する問題を見つけることができるだけでなく、結果はほとんどありません。
さらに、JSRenderの一部を理解するのは本当に難しいので、共有するには「ベストプラクティス」が緊急に必要です。
最近の使用に基づいて、Xiaocaiはいくつかの実用的な経験を要約しており、もちろん、これらの経験は公式の文書には見られません。
#parentを使用して親データにアクセスするためのネストされたループ（推奨されません）
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> #parentを使用して親データにアクセスするためにネストされたループ--- Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<表>
<head>
<tr>
<th>シリアル番号</th>
<th>名前</th>
<th>家族</th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<スクリプトsrc = "jquery.min.js"> </script>
<スクリプトsrc = "jsviews.js"> </script>
<！ - jsrenderテンプレートを定義します - >
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{：＃index + 1}} </td>
<td> {{：name}} </td>
<td>
{{For Family}}
{{！ - #parentを使用して親のインデックスにアクセスする - }}
<b> {{：＃parent.parent.index + 1}}。{{：＃index + 1}} </b>
{{！ - #parentを使用して親データにアクセスすると、親データがデータ属性に保存されます - }}
{{！ - #dataはこれに相当します - }}
{{：#data}}の{{：#data}}}
{{/のために}}
</td>
</tr>
</script>
<スクリプト>
//データソース
var dataSrouce = [{
名前：「Zhang San」、
家族： [
"お父さん"、
"母親"、
「兄」
]
}、{
名前：「Li Si」、
家族： [
"祖父"、
"祖母"、
"叔父"
]
}];
//データのレンダリング
var html = $（ "＃testtmpl"）。render（dataSrouce）;
$（ "＃list"）。append（html）;
</script>
</body>
</html>
パラメーターを使用して親データにアクセスするためのネストされたループ（推奨）
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title>ネストされたループはパラメーターを使用して親データにアクセスします--- Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<表>
<head>
<tr>
<th>シリアル番号</th>
<th>名前</th>
<th>家族</th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<スクリプトsrc = "jquery.min.js"> </script>
<スクリプトsrc = "jsviews.js"> </script>
<！ - jsrenderテンプレートを定義します - >
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{：＃index + 1}} </td>
<td> {{：name}} </td>
<td>
{{！ - forループを使用する場合、その後パラメーターを追加できます。パラメーターは〜から開始する必要があり、複数のパラメーターはスペースによって分離されます - }}
{{！ - パラメーターを介して、親データをキャッシュします。子ループのパラメーターにアクセスすることにより、親データに間接的にアクセスできます - }}
{{for Family〜ParentIndex =＃index〜ParentName = name}}
<b> {{：〜ParentIndex + 1}}。{{：＃index + 1}} </b>
{{！ - #dataはこれに相当します - }}
{{：#data}}の{{：〜ParentName}}
{{/のために}}
</td>
</tr>
</script>
<スクリプト>
//データソース
var dataSrouce = [{
名前：「Zhang San」、
家族： [
"お父さん"、
"母親"、
「兄」
]
}、{
名前：「Li Si」、
家族： [
"祖父"、
"祖母"、
"叔父"
]
}];
//データのレンダリング
var html = $（ "＃testtmpl"）。render（dataSrouce）;
$（ "＃list"）。append（html）;
</script>
</body>
</html>
カスタムタグで他のものを使用します（非常にお勧めしません）
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title>カスタムタグでelseを使用--- Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<表>
<head>
<tr>
<th>名前</th>
<th>単価</th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<スクリプトsrc = "jquery.min.js"> </script>
<スクリプトsrc = "jsviews.js"> </script>
<！ - jsrenderテンプレートを定義します - >
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{：name}} </td>
<td>
{{！ - iSshowはカスタムタグで、価格はパスされたパラメーター、ステータスは追加のプロパティです - }}
{{isshow価格ステータス= 0}}
{{：価格}}
{{他の価格ステータス= 1}}
-
{{/isshow}}
</td>
</tr>
</script>
<スクリプト>
//データソース
var dataSrouce = [{
名前：「Apple」、
価格：108
}、{
名前：「ダイ」、
価格：370
}、{
名前：「ピーチ」、
価格：99
}、{
名前：「パイナップル」、
価格：371
}、{
名前：「オレンジ」、
価格：153
}];
//カスタムタグ
$ .VIEWS.TAGS（{
「isshow」：function（rice）{
var temp = price+''。分割（ ''）;
if（this.tagctx.props.status === 0）{
//価格が水仙の数かどうかを判断します。もしそうなら、それは表示されます、それ以外の場合は表示されません。
if（price ==（math.pow（parseint [0]、10）、3）+math.pow（parseint（temp [1]、10）、3）+math.pow（parseint（temp [2]、10）、3））{）{
this.tagctxs [0] .render（）;
}それ以外{
this.tagctxs [1] .render（）を返します。
}
}それ以外{
戻る "";
}
}
}）;
//データのレンダリング
var html = $（ "＃testtmpl"）。render（dataSrouce）;
$（ "＃list"）。append（html）;
</script>
</body>
</html>
カスタムタグの代わりにヘルパーを使用します（推奨）
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title>カスタムタグの代わりにヘルパーを使用します--- Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<表>
<head>
<tr>
<th>名前</th>
<th>単価</th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<スクリプトsrc = "jquery.min.js"> </script>
<スクリプトsrc = "jsviews.js"> </script>
<！ - jsrenderテンプレートを定義します - >
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{：name}} </td>
<td>
{{！ - ブランチジャンプにネイティブを使用し、論理処理にヘルパーを使用 - }}
{{if〜isshow（price）}}
{{：価格}}
{{それ以外}}
-
{{/もし}}
</td>
</tr>
</script>
<スクリプト>
//データソース
var dataSrouce = [{
名前：「Apple」、
価格：108
}、{
名前：「ダイ」、
価格：370
}、{
名前：「ピーチ」、
価格：99
}、{
名前：「パイナップル」、
価格：371
}、{
名前：「オレンジ」、
価格：153
}];
//ヘルパー
$ .views.helpers（{
「isshow」：function（rice）{
var temp = price+''。分割（ ''）;
if（price ==（math.pow（parseint [0]、10）、3）+math.pow（parseint（temp [1]、10）、3）+math.pow（parseint（temp [2]、10）、3））{）{
trueを返します。
}それ以外{
falseを返します。
}
}
}）;
//データのレンダリング
var html = $（ "＃testtmpl"）。render（dataSrouce）;
$（ "＃list"）。append（html）;
</script>
</body>
</html>
完全なサンプルコードをダウンロードするには、ここをクリックしてください。
この記事が、みんなのJSRenderプログラミング学習に役立つことを願っています。