Guía para usar exprimidor para un motor de plantilla liviana

Cómo usar

Compilar la plantilla y representar los resultados inmediatamente en función de los datos

 exprimidor (TPL, datos);

Solo compile la plantilla y no la renderice todavía, devuelva una función compilada reutilizable.

 var compilado_tpl = juicer (tpl);

Renderizar la plantilla previamente compilada basada en los datos dados

 var compilado_tpl = juicer (tpl); var html = compilado_tpl.render (datos);

Registrar/Iniciar sesión Funciones personalizadas (objeto)

 Juicer.Register ('function_name', function); juicer.unregister ('function_name');

Configuración de parámetros predeterminada

 {caché: true [falso]; script: verdadero [falso]; Manejo de errores: verdadero [falso]; detección: verdadero [falso]; }

Modifique la configuración predeterminada, modifíela una por una

 Juicer.set ('caché', falso);

Modificar la configuración predeterminada, la modificación por lotes

 Juicer.set ({'script': false, 'caché': falso})

Juicer cacheará a las plantillas compiladas de forma predeterminada, evitando así el tiempo dedicado a compilar repetidamente la misma plantilla cuando los datos se representan varias veces. Si no hay necesidades especiales, no se recomienda apagar el caché en los parámetros predeterminados. Hacerlo hará que el caché exprimidor se invalida y reduzca el rendimiento.

gramática

* $ {variable}

- Use la variable de salida $ {}, donde _ es una referencia a la fuente de datos ($ {_}). Admite el uso de funciones personalizadas.

 $ {name} $ {name | function} $ {name | function, arg1, arg2}

 var = links: [{href: 'http://juicer.name', alt: 'juicer'}, {href: 'http://benben.cc', alt: 'benben'}, {href: 'http://ued.taobao.com', alt: taobao ued '} var tpl = ['{@each Links como elemento}', '$ {elemento | links_build} <Br />', '{@ /cada uno}']. Join (''); Var Links = function (data) {return '<a href = "' + data.href + ''" /> ''; sh .Juicer.register('links_build ', enlaces); // registrar la función personalizada Juicer (TPL, JSON);

* Escapar/Evite escapar

- $ {variable} escapará de su contenido antes de la salida, y si no desea que se escape la salida, puede usar $$ {variable} para evitar esto.

 var json = {valor: '<strong> juicer </strong>'}; var escape_tpl = '$ {value}'; var unescape_tpl = '$$ {value}'; Juicer (Escape_TPL, JSON); // salida '<strong> juicer </strong>' juicer (unescape_tpl, json); // Salida '<strong> Juicer </strong>'

*Bucle a través de {@each} ... {@/cada uno}

- iterar sobre la matriz, $ {índice} índice actual

 {@@Aach Lista como elemento, índice} $ {item.prop} $ {index} // índice actual {@/cada uno}

*Juez {@if} ... {@else if} ... {@else} ... {@/if}

*Comentario {# comentario contenido}

{# Aquí está el contenido de comentarios}

*Bucle auxiliar {@each i en el rango (m, n)}

 {@A cada i en el rango (5, 10)} $ {i}; // Salida 5; 6; 7; 8; 9; {@/cada}

*Sub-plemplate Nesting {@include tpl, data}

-El anidación de la subemplución además de la introducción de subplatos especificados en los datos, el código de subemplade escrito en la etiqueta `script` también se puede utilizar especificando la cadena`#id '.

- Código HTML:

 <script type = "text/juicer" id = "subtpl"> Soy sub contenido, $ {name} </script>

- Código JavaScript:

 var tpl = 'hi, {@include "#subtpl", subdata}, end.'; Juicer (tpl, {subdata: {name: 'Juicer'}}); // Abrir HI, I'm sub Content, Jujer, End. // o introducir subtemplates a través de datos, el siguiente código también tendrá el mismo resultado de renderizado: var tpl = 'hi, {@include subtpl, subdata}, final.'; Juicer (tpl, {subtpl: "Soy sub contenido, $ {name}", subdata: {name: 'juicer'}});

Un ejemplo completo

Código HTML:

 <script id = "tpl" type = "text/platplate"> <ul> {@Each List as it, index} <li> $ {it.name} (index: $ {index}) </li> {@/cada uno} {@@Aach Blah como} <li> num: $ {it.num} <Br/> {@if it.num == 3}} IT2} $ {it2.time} <Br/> {@/cada uno} {@/if} </li> {@/cada uno} </ul> </script>

Código JavaScript:

 var data = {list: [{name: 'guykai', show: true}, {name: 'benben', show: false}, {name: 'dierbaby', show: true}], bla: [{num: 1}, {num: 2}, {num: 3, inner: {'Time': '15: 00 '},}, {' '16: 00 '}, {' Time ': '17: 00'}, {'Time': '18: 00 '}]}, {num: 4}]}; var tpl = document.getElementById ('tpl'). innerhtml; var html = juicer (tpl, data);