Usage of JsRenderforindex cyclic index _ javascript skills

This article mainly introduces the use of JsRenderforindex for loop indexing, and analyzes the usage of loops in JsRender in detail in the form of examples. for more information, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

JsRedner and JsViews (JsViews are further encapsulated based on JsRender) are called the next-generation Jquery template. Official Address:
Https://github.com/BorisMoore/jsrender;
Https://github.com/borismoore/jsviews.

Loop is an essential part of the template engine. Speaking of loop, it will lead to a crucial factor: Index.

The so-called index, that is, the number of cycles. Through the index, you can obtain the number of cycles for the current cycle.

If you have read the official documentation, you will see the following indexing method:

Data:

The Code is as follows:

{
Names: ["Maradona", "Pele", "Ronaldo", "Messi"]
}

Template markup:

The Code is as follows:

{For names }}

{: # Index + 1 }}.
{{: # Data }}

{/}}

Result:

The Code is as follows:

1. Maradona
2. Pele
3. Ronaldo
4. Messi

The index can be obtained through the special literal # index in the loop. The special literal # data is equivalent to this, which represents every name in this example.

Next, let's look at the above example, but this time I want to show only the names starting with M:

Data:

The Code is as follows:

{
Names: ["Maradona", "Pele", "Ronaldo", "Messi"]
}

Template markup:

The Code is as follows:

{For names }}
{If # data. indexOf ("M") = 0 }}

{: # Index + 1 }}.
{{: # Data }}

{/If }}
{/}}

Result:

The Code is as follows:

Unavailable (nested view): use # getIndex () 1. Maradona
Unavailable (nested view): use # getIndex () 1. Messi

An if judgment is added, and an error is returned!

The problem lies in # index. The error prompt is clear. You can replace # index with # getIndex.

Try the replaced code:

Data:

The Code is as follows:

{
Names: ["Maradona", "Pele", "Ronaldo", "Messi"]
}

Template markup:

The Code is as follows:

{For names }}
{If # data. indexOf ("M") = 0 }}

{{: # GetIndex () + 1 }}.
{{: # Data }}

{/If }}
{/}}

Result:

The Code is as follows:

1. Maradona
4. Messi

Why? Simply put, although {if} does not create a common data scope, it interferes with the hidden scope. That is to say, {if} will not block the visibility of general data (the data you pass in), but will interfere with the visibility of hidden data (# index, # parent. This is a simple understanding, and you don't have to go into it, because this is only a defect of this framework and is not a standard.

Therefore, this article gives readers a very important conclusion: Try to use # getIndex () to obtain the index and avoid using # index unless your application is simple enough.

I hope this article will help you learn JsRender.