オブジェクト構文のための JsRender の概要_JavaScript スキル

この記事では、オブジェクトの JsRender の基本構文について簡単に説明します。皆さんの参考に共有してください。詳細は以下の通りです。

JavaScript テンプレート エンジンとして、JsRender にはループ関数、つまり for が必要ですが、JsRender は柔軟性が高すぎるため、実際にはオブジェクトをループ オブジェクトとして受け入れることができます。

{{for Array}} と {{for Object}} は両方とも使用できます。{{for Array}} は、配列を走査して各要素を 1 つずつ取り出すことを誰もが理解できます。しかし、{{for Object}} は少しわかりにくく、公式ドキュメントでは役に立たない例のみが示されており、その他の説明はありません。

最初、Xiaocai は、{{for Object}} の目的はオブジェクトのすべてのプロパティを走査することだと考えていましたが、よく考えてみると、この関数 {{props Object}} の機能が実装されています。 props タグは、ループの数だけ属性があり、Key は属性名を表し、prop は属性値を表します。使用します。

実際には、 {{for Object}} はループではありません。これは、Handlebars.js と同様に、Object 環境に入り、現在のコンテキストを Object に設定することを意味します。

例:

データ:

コードをコピー コードは次のとおりです:

{
"title": "A チーム",
「メンバー」: [
{
"名前": "ピート",
"city": "members_city",
「アドレス」: {
"都市": "住所_都市",
"city1": "address_city1",
"city2": "address_city2"
}
}
]
}

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

コードをコピー コードは次のとおりです:

{{メンバー向け}}
{{アドレス用}}

.{{:city}}

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

結果:

コードをコピー コードは次のとおりです:

address_city

この結果から、 members 項目の下にも city 属性がありますが、{{for address}} を介して address が指すオブジェクトに入るために、{{:city}} が直接取得されていることがわかります。住所。

同時に、address には 3 つの属性がありますが、結果は 1 行しか出力されません。これは、{{for Object}} がループせず、これを切り替えているだけであることを証明しています。

この記事が皆さんの JsRender プログラミングの学習に役立つことを願っています。