Este artigo descreve o índice de loop jsrender para índice. Compartilhe para sua referência. A análise específica é a seguinte:
Jsredner e JSViews (JSViews é outro encapsulamento baseado no JSrender) são chamados de próxima geração de modelos jQuery, o endereço oficial:
https://github.com/borismoore/jsrender;
https://github.com/borismoore/jsviews.
Os loops são uma parte essencial do mecanismo de modelo e, quando se trata de loops, é introduzido um fator crucial: indexação.
O chamado índice é o número de loops. Através do índice, você pode obter o loop atual quantas vezes é.
Se os leitores leram o documento oficial, eles verão as seguintes maneiras de obter o índice:
dados:
Copie o código da seguinte forma: {
Nomes: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
marcação de modelo:
Copie o código da seguinte forma: {{for Names}}
<div>
<b> {{: #index+1}}. </b>
<pan> {{: #Data}} </span>
</div>
{{/para}}
resultado:
Copie o código da seguinte forma: 1. Maradona
2. PELE
3. Ronaldo
4. Messi
O índice pode ser obtido no loop por um #index literal especial, que é equivalente a isso, e neste caso representa cada nome.
Em seguida, vamos fazer alguns truques e o exemplo acima, mas desta vez espero exibir apenas nomes começando com M:
dados:
Copie o código da seguinte forma: {
Nomes: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
marcação de modelo:
Copie o código da seguinte forma: {{for Names}}
{{se #data.indexof ("m") == 0}}
<div>
<b> {{: #index+1}}. </b>
<pan> {{: #Data}} </span>
</div>
{{/se}}
{{/para}}
resultado:
Copie o código da seguinte forma: indisponível (visualização aninhada): use #getIndex () 1. Maradona
Indisponível (visualização aninhada): use #getIndex () 1. Messi
Eu simplesmente adicionei um julgamento se ele relatou um erro!
O problema está no #Index. A mensagem de erro é muito clara. Você pode usar #getIndex () em vez de #Index.
Experimente o código substituído:
dados:
Copie o código da seguinte forma: {
Nomes: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
marcação de modelo:
Copie o código da seguinte forma: {{for Names}}
{{se #data.indexof ("m") == 0}}
<div>
<b> {{: #getIndex ()+1}}. </b>
<pan> {{: #Data}} </span>
</div>
{{/se}}
{{/para}}
resultado:
Copie o código da seguinte forma: 1. Maradona
4. Messi
Por que isso? Simplificando, é porque, embora {{se}} não crie um escopo de dados regular, ele interfere no escopo oculto. Isto é, {{se}} não bloqueará a visibilidade dos dados regulares (os dados que você passa), mas interferirá na visibilidade dos dados ocultos (#Index, #Parent). Esse é um entendimento simples, e não há necessidade de entrar nele, porque isso é apenas uma falha dessa estrutura, não um padrão.
Portanto, este artigo oferece aos leitores uma conclusão importante: tente usar #getIndex () para obter o índice e evitar o uso de #Index, a menos que seu aplicativo seja simples o suficiente.
Espero que este artigo seja útil para o aprendizado de todos.