Home > Web Front-end > JS Tutorial > Introduction to JsRender for object syntax_javascript skills

Introduction to JsRender for object syntax_javascript skills

WBOY
Release: 2016-05-16 16:32:37
Original
1200 people have browsed it

This article briefly describes the basic syntax of JsRender for object. Share it with everyone for your reference. The details are as follows:

As a JavaScript template engine, JsRender must have a loop function, that is, for. However, because JsRender is too flexible, for can actually accept object as a loop object.

{{for Array}} and {{for Object}} are both allowed. Everyone can understand {{for Array}}, which is to traverse an array and take out each element one by one. But {{for Object}} is a bit confusing, and the official document only gives an unhelpful example without any other explanation.

At first Xiaocai thought that the purpose of {{for Object}} was to traverse all the properties of the Object, but after thinking about it carefully, this function {{props Object}} has been implemented. The function of the props tag is to traverse all the properties of the Object. There are as many attributes as there are loops. Each loop will have two hidden attributes: key and prop. Key represents the attribute name and prop represents the attribute value. It is very convenient to use.

Actually, {{for Object}} is not a loop. It can be understood as entering (Into), which means entering the Object environment and setting the current context to Object, similar to with in Handlebars.js .

For example:

data:

Copy code The code is as follows:
{
"title": "The A team",
"members": [
          {
"name": "Pete",
"city": "members_city",
"address": {
"city": "address_city",
"city1": "address_city1",
"city2": "address_city2"
}
}
]
}

template markup:

Copy code The code is as follows:
{{for members}}
{{for address}}

.{{:city}}


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

result:

Copy code The code is as follows:
address_city

It can be seen from the results that although there is also a city attribute under the members item, because it enters the Object pointed to by address through {{for address}}, {{:city}} is obtained directly from address.

At the same time, address has three attributes, but the result only outputs one line, which proves that {{for Object}} does not loop, it just switches this.

I hope this article will be helpful to everyone’s learning of JsRender programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template