...
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para tornar o processo de desenvolvimento mais produtivo, evitando repetições de prefixos em chaves de internacionalização.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<div tl-object="company" tl-context="detail" tl-dialog tl-opened="detailDialog.isOpen">
<!-- ... -->
<!-- Neste elemento é declarado o tl-ref, informando que todos os filhos deste nó referenciarão model.company -->
<div class="dialog-page-body" tl-ref="model.company as model">
<form class="aui">
<div class="dialog-panel-body panel-body">
<div class="field-container">
<!-- Este elemento é filho da div onde declaramos o tl-ref, ou seja, este tl-key agora é mapeado para "model.company.name" eliminando
a necessidade de informar o prefixo model.company -->
<input type="text" class="field-medium" tl-key="name" ng-model="model.0x1.name" />
</div>
<!-- ... -->
<!-- ... -->
</div> |
Internamente, no momento de execução do construtor da directive tl-ref, todas as mensagens presentes no MessageProvider, que estão no formato raw, são processadas conforme a referencia informada para a directive e colocadas em cache.
TL Find
A directive tl-find disponibiliza busca genérica sem a necessidade implementar as chamadas HTTP ao back-end. A partir de um objeto preenchido na tela (objeto no qual é passado para a directive), internamente a directive percorre os atributos deste objeto e monta uma consulta padrão. Esta consulta padrão leva em consideração os tipos de dados e é construída através de cláusulas AND (por padrão) e a concatenação dos atributos e valores do objeto. Caso a busca ocorra com sucesso, um segundo atributo chamado tl-result mapeia para qual variável é atribuida a resposta da chamada. Falhas são descartadas silenciosamente pela arquitetura.
Abaixo temos um exemplo prático de como esta directive pode ser utilizada para realizar buscas genéricas de qualquer entidade já persistida no back-end.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- partial que possui a estrutura apresentada para o usuário, com campos que estão mapeados (estes campos estão omitidos para simplicar o exemplo) em um objeto de nome 'model' no controller deste partial -->
<div id="content" tl-object="company" tl-context="list">
<!-- ... -->
<!-- este botão contem a directive tl-find, na qual recebe o objeto model que contem os valores preechidos pelo usuário -->
<!-- também esta mapeado o atributo tl-result, no qual diz que a resposta desta busca deve ser mapeada para o objeto 'list' presente no scope deste controller -->
<button class="aui-button align-right" tl-ref="common" tl-key="button.search" tl-find="model" tl-result="list" />
<!-- ... -->
</div> |