Como usar
Compilar o modelo e renderizar os resultados imediatamente com base nos dados
espremedor (TPL, dados);
Compile apenas o modelo e ainda não o renderize, retorne uma função compilada reutilizável.
var compilado_tpl = espremedor (tpl);
Renderizar o modelo previamente compilado com base nos dados fornecidos
var compilado_tpl = espremedor (tpl); var html = compilado_tpl.render (dados);
Funções personalizadas de registro/login (objeto)
Juicer.Register ('function_name', function); Juicer.unregister ('function_name');Configuração de parâmetro padrão
{cache: true [false]; Script: True [false]; Manuseio de erros: verdadeiro [false]; Detecção: verdadeiro [false]; }Modifique a configuração padrão, modifique -a uma por uma
Juicer.set ('cache', false);Modificar a configuração padrão, modificação em lote
Juicer.set ({'script': false, 'cache': false})O Juicer irá cache os modelos compilados por padrão, evitando assim o tempo gasto compilando repetidamente o mesmo modelo quando os dados são renderizados várias vezes. Se não houver necessidades especiais, não é altamente recomendável desativar o cache nos parâmetros padrão. Isso fará com que o cache do espremedor seja invalidado e reduza o desempenho.
gramática
* $ {variável}
- Use $ {} variável de saída, onde _ é uma referência à fonte de dados ($ {_}). Suporta o uso de funções personalizadas.
$ {nome} $ {name | function} $ {name | função, arg1, arg2} var = links: [{href: 'http://juicer.name', alt: 'sucher'}, {href: 'http://benben.cc', alt: 'benben'}, {href: 'httop://ued.taobao.com,,}, {href:' htto :/ued.taoBao.com,,}, {href: 'htto :/ued.taobao.com,,}, {href:' htto: htto '}},},}, {href:' httto var tpl = ['{@each links como item}', '$ {item | links_build} <r />', '{@ /cada}']. junção (''); var links = function (dados) {return '<a href = "' + data.href + '" />';} ;juicer.register('links_build', links); // Registrar Juicer de função personalizada (TPL, JSON);* Escape/evite escapar
- $ {variável} escapará de seu conteúdo antes da saída e, se você não deseja que a saída seja escapa, poderá usar $$ {variável} para evitar isso.
var json = {value: '<strong> espremedor </strong>'}; var escape_tpl = '$ {value}'; var unescape_tpl = '$$ {value}'; Juicer (Escape_TPL, JSON); // output '<strong> escoicer </strong>' espremedor (UNESCAPE_TPL, JSON); // saída '<strong> espremedor </strong>'*Faça um loop através de {@each} ... {@/cada}
- itera sobre a matriz, $ {index} índice atual
{@Each List como item, index} $ {item.prop} $ {index} // índice atual {@/cada}*Juiz {@if} ... {@else if} ... {@else} ... {@/if}
*Comentário {# Comment Content}
{# Aqui está o conteúdo do comentário}
*Loop auxiliar {@Each i em range (m, n)}
{@Each i no intervalo (5, 10)} $ {i}; // saída 5; 6; 7; 8; 9; {@/cada}*Nestado de sub-templos {@include TPL, dados}
-Ninho do subdimplacto, além de introduzir sub-timplados especificados nos dados, o código do sub-templado gravado na tag `script` também pode ser usado especificando a string`#id`.
- código HTML:
<script type = "text/sucher" id = "subtpl"> eu sou sub -conteúdo, $ {name} </script>- Código JavaScript:
var tpl = 'oi, {@include "#subtpl", subdata}, end. // ou introduzir sub-templacos através dos dados, o código a seguir também terá o mesmo resultado de renderização: var tpl = 'hi, {@include subtpl, subdata}, end.'; Juicer (tpl, {subtpl: "Eu sou sub -conteúdo, $ {name}", subdata: {name: 'Juicer'}});Um exemplo completo
Código HTML:
<script id = "tpl" type = "text/modelo"> <ul> {@Each List como ele, index} <li> $ {it.name} (index: $ {index}) </li> {@/cada} {@each blah como it} <li> num: $ {it.num} <r/> { it2} $ {it2.time} <r/> {@/cada} {@/if} </li> {@/cada} </ul> </sCript>Código JavaScript:
var data = { list: [ {name:' guokai', show: true}, {name:' benben', show: false}, {name:' dierbaby', show: true} ], blah: [ {num: 1}, {num: 2}, {num: 3, inner:[ {'time': '15:00'}, {'time': '16: 00 '}, {' time ': '17: 00'}, {'time': '18: 00 '}]}, {num: 4}]}; var tpl = document.getElementById ('tpl'). Innerhtml; var html = espremedor (TPL, dados);