JsRender for Object Syntax description

JsRender as a JavaScript template engine, it is necessary to have a loop function, that is, for, but because JsRender is too flexible, for unexpectedly can accept object as a looping object.

{{for array}} and {{for Object}} are all allowed, {{for array}} Everyone can understand that it is to iterate through an array and remove each element one at a. But {{for Object}} is a bit of a freak, and the official documentation is just an example of nothing to help, no other explanation.

At first, it was thought that {{for Object}} was intended to traverse all the properties of the object, but carefully thought that the function {{props Object}} had already been implemented, and the function of the props tag was to iterate through all the properties of the object, how many properties were there, the number of loops, Each cycle has two hidden properties: Key,prop,key represents the property name, and prop represents the property value, which is very convenient to use.

In fact, {{for Object}} is not a loop, it can be understood as entering (into), which means entering into the object environment, setting the current context to object, similar to with in Handlebars.js.

As an example:

Data

1 {2"title": "The A team",3"Members": [4     {5"Name": "Pete",6"City": "Members_city",7"Address": {8"City": "Address_city",9"City1": "Address_city1",Ten"City2": "Address_city2" One       } A     } -   ] -}

Template markup:

1 {{ for "} }2   {{ for Address}}3     <p . {{:city}}</p>4   {{/for}}5 {{/for}}

Result

1 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 Object Syntax description