Jsrender for array and for object syntax

For Array Loop array

Recycling Use Cases

Defining array Data

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

Used in templates

{{for names}}   < Div >    < b > {{: #index +1}}. </ b >    < span > {{: #data}} </ span >  </ Div > {{/for}}

Output results

1. Maradona2. Pele3. Ronaldo4. Messi

An index can be obtained by a special literal #index in a loop, with a special literal #data equivalent to this, which in this case represents each name.

When you use the For loop in another jsrender, you do not create regular data scopes, but interfere with hidden scopes, such as when you use IF. That is, {{if}} does not block the visibility of regular data (your incoming data), but it interferes with the visibility of hidden data (#index, #parent).

So try to get the index using the #getIndex () when getting the index subscript , avoid using #indexunless your app is simple enough.

You can try the difference between the following two uses

1.

{{for names}}  {{if #data. IndexOf ("M") = = 0}    } < Div >      < b > {{: #index +1}}. </ b >      < span > {{: #data}} </ span >    </ Div >   {{/if}}{{/for}}

2.

{{for names}}   {{if #data. IndexOf ("M") = = 0}     } < Div >       < b > {{: #getIndex () +1}}. </ b >       < span > {{: #data}} </ span >     </ Div >    {{/if}} {{/for}}

The For object enters object

Here for does not represent the loop, which represents the entry into the object. Sets the current context to object, similar to with in Handlebars.js.

As an example:

var data ={  "title": "The A team",  "members": [    {      "name": "Pete",      "City": "Members_city",      " Address ": {        " city ":" Address_city ",        " city1 ":" Address_city1 ",        " City2 ":" Address_city2 "      }    }  ]}

Templates

{{for members}}  {{for address}}     < P >. {: City}} </ P >   {{/for}}{{/for}}

Results

Address_city

As you can see from the results, although there is a city attribute under the members item, the {{: city}} was directly fetched from address because it entered the object pointed to in address through {{for address}}.

At the same time, the address has three attributes, but the result only outputs a single line, proving that {{for Object}} is not looping, just switching this.

Jsrender for array and for object syntax