Detailed explanation of JsRender for index loop index usage

The example in this article describes the use of JsRender for index loop index. Share it with everyone for your reference. The specific analysis is as follows:

JsRedner and JsViews (JsViews is a further encapsulation based on JsRender) are called the next generation of Jquery templates, official address:

https://github .com/BorisMoore/jsrender;
https://github.com/BorisMoore/jsviews.

Loop is an essential part of the template engine, and talking about loops will lead to a crucial factor: index.

The so-called index is the number of cycles. Through the index, you can get the number of times the current cycle is.

If readers have read the official documentation, they will see the following method of obtaining the index:

data:

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

template markup:

{{for names}}

{{: #index+1}}.
{{: #data}}

{{/for}}

result:

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

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

Next let’s do a little trick, still the above example, but this time I want to only display names starting with M:

data:

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

template markup:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    

       {{: #index+1}}.
       {{: #data}}
    

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

result:

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

I simply added an if judgment, but an error was reported!

The problem lies in #index. The error message is very clear, asking you to use #getIndex() instead of #index.

Try the replaced code:

data:

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

template markup:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    
       {{: #getIndex()+1}}.
       {{: #data}}
    

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

result:

1. Maradona
4. Messi

Why is this? Simply put, it is because although {{if }} does not create a regular data scope, it interferes with the hidden scope. In other words, {{if }} will not block the visibility of regular data (the data you pass in), but it will interfere with the visibility of hidden data (#index, #parent). This is a simple understanding, and there is no need to go into details, because this is just a flaw of this framework, not a standard.

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

I hope this chapter will be helpful for everyone to learn JsRender. For more related tutorials, please visit jQuery Video Tutorial!