Este artigo é um tutorial introdutório prático para o JSrender, que exemplos descrevem pontos de conhecimento, como o uso de tags e acesso aninhado aos dados dos pais. Compartilhe para sua referência. Os detalhes são os seguintes:
Prefácio
O JSrender é um mecanismo de modelo JavaScript baseado no jQuery. Tem os seguintes recursos:
・ Simples e intuitivo
· Poderoso
·Extensível
・ Tão rápido quanto um raio
Esses recursos parecem incríveis, mas quase todos os mecanismos de modelo serão anunciados assim. . .
Devido às necessidades de trabalho, a Xiaocai entrou em contato com este mecanismo de modelo. Depois de usá -lo por um tempo, descobri que é realmente bastante poderoso, mas Xiaocai sente que alguns lugares são poderosos demais, o que faz as pessoas acharem difícil de entender.
Por outro lado, os documentos oficiais da JSrender são relativamente detalhados, mas surpreendentemente existem poucas outras informações. Se você encontrar algum problema, basicamente não pode pesquisar. Você não apenas pode encontrar problemas relacionados, mas quase não há resultado.
Além disso, algumas partes do JSrender são realmente difíceis de entender, por isso preciso urgentemente de algumas "melhores práticas" para compartilhar.
Com base no uso recente, a Xiaocai resumiu algumas experiências práticas e, é claro, essas experiências não podem ser encontradas na documentação oficial.
Loop aninhado para acessar os dados dos pais usando #parent (não recomendado)
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> loop aninhado usando #parent para acessar os dados dos pais --- por yang yuan </title>
<estilo>
</style>
</head>
<Body>
<div>
<tabela>
<head>
<tr>
<th> Número de série </th>
<th> nome </th>
Membros da família </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</tabela>
</div>
<script src = "jquery.min.js"> </sCript>
<script src = "jsViews.js"> </script>
<!-Defina o modelo JSRender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<Td>
{{para família}}
{{!-Use #parent para acessar o índice pai-}}
<b> {{:#parent.parent.index + 1}}. {{:#index + 1}} </b>
{{!-Use #Parent para acessar dados dos pais, e os dados dos pais são salvos no atributo de dados-}}
{{!-#Data é equivalente a isso-}}
{{: #Data}} de {{: #Data}}
{{/para}}
</td>
</tr>
</script>
<Cript>
// fonte de dados
var dataSrouce = [{
Nome: "Zhang San",
família: [
"pai",
"Mãe",
"Irmão mais velho"
]
}, {
Nome: "Li si",
família: [
"avô",
"avó",
"tio"
]
}];
// Dados de renderização
var html = $ ("#testTMPL"). renderização (DataSrouce);
$ ("#LIST"). Appender (HTML);
</script>
</body>
</html>
Loops aninhados para acessar dados dos pais usando parâmetros (recomendado)
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Loops aninhados usam parâmetros para acessar dados dos pais --- por yang yuan </title>
<estilo>
</style>
</head>
<Body>
<div>
<tabela>
<head>
<tr>
<th> Número de série </th>
<th> nome </th>
Membros da família </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</tabela>
</div>
<script src = "jquery.min.js"> </sCript>
<script src = "jsViews.js"> </script>
<!-Defina o modelo JSRender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<Td>
{{!- Ao usar um loop for, você pode adicionar parâmetros depois. Os parâmetros devem começar com ~, e vários parâmetros são separados por espaços-}}
{{!- Através dos parâmetros, cache os dados dos pais. Ao acessar os parâmetros no loop infantil, podemos acessar indiretamente os dados dos pais-}}
{{for Family ~ ParentIndex =#Index ~ parentname = nome}}
<b> {{: ~ ParentIndex + 1}}. {{:#index + 1}} </b>
{{!-#Data é equivalente a isso-}}
{{: #Data}} de {{: ~ pomername}}
{{/para}}
</td>
</tr>
</script>
<Cript>
// fonte de dados
var dataSrouce = [{
Nome: "Zhang San",
família: [
"pai",
"Mãe",
"Irmão mais velho"
]
}, {
Nome: "Li si",
família: [
"avô",
"avó",
"tio"
]
}];
// Dados de renderização
var html = $ ("#testTMPL"). renderização (DataSrouce);
$ ("#LIST"). Appender (HTML);
</script>
</body>
</html>
Use mais em tags personalizadas (altamente não recomendado)
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Use mais em tags personalizadas --- por Yang Yuan </ititle>
<estilo>
</style>
</head>
<Body>
<div>
<tabela>
<head>
<tr>
<th> nome </th>
<th> Preço unitário </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</tabela>
</div>
<script src = "jquery.min.js"> </sCript>
<script src = "jsViews.js"> </script>
<!-Defina o modelo JSRender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<Td>
{{!-iSshow é uma etiqueta personalizada, o preço é o parâmetro aprovado, o status é uma propriedade adicional-}}
{{ISSHOW Preço Status = 0}}
{{:preço}}
{{else Price Status = 1}}
-
{{/isShow}}
</td>
</tr>
</script>
<Cript>
// fonte de dados
var dataSrouce = [{
Nome: "Apple",
Preço: 108
}, {
Nome: "Da Li",
Preço: 370
}, {
Nome: "Peach",
Preço: 99
}, {
Nome: "Pineapple",
Preço: 371
}, {
Nome: "Orange",
Preço: 153
}];
// tag personalizado
$ .Views.tags ({
"iSshow": function (preço) {
var temp = preço+''. Split ('');
if (this.tagctx.props.status === 0) {
// julga se o preço é o número de narcisos. Nesse caso, será exibido, caso contrário, não será exibido.
if (preço == (math.pow (parseint (temp [0], 10), 3)+math.pow (parseint (temp [1], 10), 3)+math.pow (parseint (temp [2], 10), 3)) {
Retorne this.TAGCTXS [0] .render ();
}outro{
Retorne this.TAGCTXS [1] .render ();
}
}outro{
retornar "";
}
}
});
// Dados de renderização
var html = $ ("#testTMPL"). renderização (DataSrouce);
$ ("#LIST"). Appender (HTML);
</script>
</body>
</html>
Use Helper em vez de tags personalizadas (recomendado)
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Use Helper em vez de tags personalizadas --- por Yang Yuan </ititle>
<estilo>
</style>
</head>
<Body>
<div>
<tabela>
<head>
<tr>
<th> nome </th>
<th> Preço unitário </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</tabela>
</div>
<script src = "jquery.min.js"> </sCript>
<script src = "jsViews.js"> </script>
<!-Defina o modelo JSRender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<Td>
{{!-Use o nativo se para o salto do ramo, use Helper para processamento lógico-}}
{{if ~ iSShow (Price)}}
{{:preço}}
{{outro}}
-
{{/se}}
</td>
</tr>
</script>
<Cript>
// fonte de dados
var dataSrouce = [{
Nome: "Apple",
Preço: 108
}, {
Nome: "Da Li",
Preço: 370
}, {
Nome: "Peach",
Preço: 99
}, {
Nome: "Pineapple",
Preço: 371
}, {
Nome: "Orange",
Preço: 153
}];
//Ajudante
$ .Views.Helpers ({
"iSshow": function (preço) {
var temp = preço+''. Split ('');
if (preço == (math.pow (parseint (temp [0], 10), 3)+math.pow (parseint (temp [1], 10), 3)+math.pow (parseint (temp [2], 10), 3)) {
retornar true;
}outro{
retornar falso;
}
}
});
// Dados de renderização
var html = $ ("#testTMPL"). renderização (DataSrouce);
$ ("#LIST"). Appender (HTML);
</script>
</body>
</html>
Clique aqui para baixar o código de exemplo completo.
Espero que este artigo seja útil para o aprendizado de programação JSrender de todos.