この記事では、オブジェクトのJSRenderの基本的な構文について簡単に説明します。参照のためにそれを共有してください。詳細は次のとおりです。
JavaScriptテンプレートエンジンとして、JSRenderはループ機能を持つために不可欠です。ただし、JSRenderは柔軟性が高すぎるため、実際にオブジェクトをループオブジェクトとして受け入れることができます。
{{for array}}と{{for object}}の両方が許可されます。誰もが{{Array}}を理解することができます。これは、配列を通過し、各要素を1つずつ取り出すことです。しかし、{{for object}}は少し信じられないほど素晴らしいものであり、公式のドキュメントは、説明なしに役に立たない例を示しています。
最初は、Xiaocaiは、{{for object}}の目的はオブジェクトのすべてのプロパティを横断することであると考えていましたが、慎重に考えると、この関数{{props object}}が実装されています。 Propsタグの機能は、オブジェクトのすべてのプロパティを横断することです。そこにあるプロパティの数、回数がループされます。各ループには2つの隠されたプロパティがあります。キー、プロップ、キーは属性名を表し、プロップは属性値を表します。これは非常に便利です。
実際、{{for object}}はループではありません。つまり、オブジェクト環境に入り、現在のコンテキストをオブジェクトに設定して、handlebars.jsと同様に、現在のコンテキストをオブジェクトに設定します。
例えば:
データ:
次のようにコードをコピーします。{
「タイトル」:「チーム」、
「メンバー」:[
{
「名前」:「ピート」、
「都市」:「Members_City」、
"住所": {
「都市」:「address_city」、
「city1」:「address_city1」、
「city2」:「address_city2」
}
}
]
}
テンプレートマークアップ:
次のようにコードをコピーします:{{メンバーの}}
{{アドレス}}
<p>。{{:city}} </p>
{{/のために}}
{{/のために}}
結果:
コードコピーは次のとおりです:address_city
結果から、メンバーのアイテムには都市の属性もありますが、{{for dorders}}を介して住所によって指されたオブジェクトを入力するため、{{:city}}はアドレスから直接取得されることがわかります。
同時に、アドレスには3つのプロパティがありますが、その結果、1つの行のみが出力されるため、{{for object}}がループしないことを証明し、これを切り替えます。
この記事が、みんなのJSRenderプログラミング学習に役立つことを願っています。