Este artículo es un tutorial introductorio práctico para JSRender, que los ejemplos describen puntos de conocimiento como el uso de la etiqueta y el acceso anidado de la etiqueta a los datos de los padres. Compártelo para su referencia. Los detalles son los siguientes:
Prefacio
JSRender es un motor de plantilla JavaScript basado en jQuery. Tiene las siguientes características:
・ Simple e intuitivo
· Poderoso
·Extensible
・ Tan rápido como Lightning
Estas características se ven increíbles, pero casi todos los motores de plantilla se anunciarán así. . .
Debido a las necesidades de trabajo, Xiaocai entró en contacto con este motor de plantilla. Después de usarlo por un tiempo, descubrí que es bastante poderoso, pero Xiaocai siente que algunos lugares son demasiado poderosos, lo que hace que las personas les resulte difícil de entender.
Por otro lado, los documentos oficiales de JSRender son relativamente detallados, pero sorprendentemente hay pocas información. Si encuentra algún problema, básicamente no puede buscar. No solo puede encontrar problemas relacionados, sino que casi no hay ningún resultado.
Además, algunas partes de JSRender son realmente difíciles de entender, por lo que necesito urgentemente algunas "mejores prácticas" para compartir.
Según el uso reciente, Xiaocai ha resumido algunas experiencias prácticas y, por supuesto, estas experiencias no se pueden encontrar en la documentación oficial.
Bucle anidado para acceder a los datos principales usando #parent (no recomendado)
Copie el código de la siguiente manera: <! DocType Html>
<html>
<Evista>
<meta charset = "utf-8">
<title> bucle anidado usando #parent para acceder a los datos de los padres --- por Yang Yuan </title>
<estilo>
</style>
</ablo>
<Body>
<div>
<Table>
<Evista>
<tr>
<th> Número de serie </th>
<th> nombre </th>
<th> miembros de la familia </th>
</tr>
</ablo>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definir plantilla de jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<TD> {{:#index + 1}} </td>
<td> {{: name}} </td>
<TD>
{{para la familia}}
{{!-Use #Parent para acceder al índice Parent-}}
<b> {{:#parent.parent.index + 1}}. {{:#index + 1}} </b>
{{!-Use #Parent para acceder a los datos de los padres, y los datos principales se guardan en el atributo de datos-}}
{{!-#data es equivalente a esto-}}
{{: #data}} de {{: #data}}
{{/para}}
</td>
</tr>
</script>
<script>
// fuente de datos
var dataSrouce = [{
Nombre: "Zhang San",
familia: [
"papá",
"Madre",
"Hermano mayor"
]
}, {
Nombre: "Li Si",
familia: [
"abuelo",
"abuela",
"tío"
]
}];
// Renderizar datos
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Bucles anidados para acceder a los datos de los padres utilizando parámetros (recomendados)
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> bucles anidados Use parámetros para acceder a los datos de los padres --- por Yang Yuan </title>
<estilo>
</style>
</ablo>
<Body>
<div>
<Table>
<Evista>
<tr>
<th> Número de serie </th>
<th> nombre </th>
<th> miembros de la familia </th>
</tr>
</ablo>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definir plantilla de jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<TD> {{:#index + 1}} </td>
<td> {{: name}} </td>
<TD>
{{!- Al usar un bucle for, puede agregar parámetros después. Los parámetros deben comenzar con ~, y múltiples parámetros están separados por espacios-}}
{{!- A través de los parámetros, almacenamos en caché los datos principales. Al acceder a los parámetros en el bucle infantil, podemos acceder indirectamente a los datos principales:}}
{{para la familia ~ parentindex =#index ~ parentName = name}}
<b> {{: ~ parentindex + 1}}. {{:#index + 1}} </b>
{{!-#data es equivalente a esto-}}
{{: #data}} de {{: ~ ParentName}}
{{/para}}
</td>
</tr>
</script>
<script>
// fuente de datos
var dataSrouce = [{
Nombre: "Zhang San",
familia: [
"papá",
"Madre",
"Hermano mayor"
]
}, {
Nombre: "Li Si",
familia: [
"abuelo",
"abuela",
"tío"
]
}];
// Renderizar datos
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Usar más en etiquetas personalizadas (muy no recomendado)
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> use más en etiquetas personalizadas --- por Yang Yuan </title>
<estilo>
</style>
</ablo>
<Body>
<div>
<Table>
<Evista>
<tr>
<th> nombre </th>
<th> Precio unitario </th>
</tr>
</ablo>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definir plantilla de jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<TD>
{{!-Isshow es una etiqueta personalizada, el precio es el parámetro aprobado, el estado es una propiedad adicional:}}
{{ISSHOW Price Status = 0}}
{{:precio}}
{{el más del estado de precio = 1}}
-
{{/isshow}}
</td>
</tr>
</script>
<script>
// fuente de datos
var dataSrouce = [{
Nombre: "Apple",
Precio: 108
}, {
Nombre: "Da Li",
Precio: 370
}, {
Nombre: "Peach",
Precio: 99
}, {
Nombre: "piña",
Precio: 371
}, {
Nombre: "Naranja",
Precio: 153
}];
// etiqueta personalizada
$ .views.tags ({
"isshow": function (precio) {
var temp = Price+''. Split ('');
if (this.tagctx.props.status === 0) {
// juzga si el precio es el número de narcisos. Si es así, se mostrará, de lo contrario no se mostrará.
if (precio == (math.pow (parseInt (temp [0], 10), 3)+math.pow (parseInt (temp [1], 10), 3)+math.pow (parseInt (temp [2], 10), 3))) {
devolver esto.tagctxs [0] .render ();
}demás{
devolver esto.tagctxs [1] .render ();
}
}demás{
devolver "";
}
}
});
// Renderizar datos
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Use ayudante en lugar de etiquetas personalizadas (recomendadas)
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> Use ayudante en lugar de etiquetas personalizadas --- por Yang Yuan </title>
<estilo>
</style>
</ablo>
<Body>
<div>
<Table>
<Evista>
<tr>
<th> nombre </th>
<th> Precio unitario </th>
</tr>
</ablo>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definir plantilla de jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<TD>
{{{!-Use nativo si para salto de rama, use ayudante para el procesamiento lógico--}}
{{if ~ isshow (precio)}}
{{:precio}}
{{demás}}
-
{{/si}}
</td>
</tr>
</script>
<script>
// fuente de datos
var dataSrouce = [{
Nombre: "Apple",
Precio: 108
}, {
Nombre: "Da Li",
Precio: 370
}, {
Nombre: "Peach",
Precio: 99
}, {
Nombre: "piña",
Precio: 371
}, {
Nombre: "Naranja",
Precio: 153
}];
//Ayudante
$ .views.helpers ({
"isshow": function (precio) {
var temp = Price+''. Split ('');
if (precio == (math.pow (parseInt (temp [0], 10), 3)+math.pow (parseInt (temp [1], 10), 3)+math.pow (parseInt (temp [2], 10), 3))) {
devolver verdadero;
}demás{
devolver falso;
}
}
});
// Renderizar datos
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Haga clic aquí para descargar el código de ejemplo completo.
Espero que este artículo sea útil para el aprendizaje de programación JSRender de todos.