Biblioteca de template HTML JavaScript recomendada para JQuery? [fechadas]

89

Alguma sugestão sobre qual biblioteca de modelo HTML iria bem com JQuery? Pesquisando no Google encontrou várias bibliotecas, mas não tenho certeza se existe uma biblioteca bem reconhecida que resistiria ao teste do tempo.

Shiva
fonte
21
Digamos que você traga de volta um objeto json com 100 registros. Cada registro precisa gerar o mesmo fragmento html. Só ajuda usar um template do que gerar a marcação em js. Permite que um designer também o projete, em vez de a marcação estar dentro de uma string em uma função js
redsquare
3
@cletus - porque é mais fácil usar um modelo formatado em html do que uma cadeia de append's
Andrey
2
Use esta comparação de desempenho para ajudá-lo na sua escolha: jsperf.com/dom-vs-innerhtml-based-templating
Manhã de

Respostas:

58

Bem, para ser franco, os modelos do lado do cliente estão muito em alta hoje em dia, mas é uma selva.

os mais populares são, acredito:

  • puro : usa apenas js, não sua própria "sintaxe"
  • bigode : bastante estável e bom, ouvi dizer.
  • jqote2 : extremamente rápido de acordo com jsperfs
  • Modelos jquery (obsoletos):

existem muitos outros, mas você precisa testá-los para ver o que melhor se adapta a você e ao seu estilo de projeto.

Pessoalmente, tenho dificuldade em adicionar uma nova sintaxe e um conjunto de lógica ( misturando lógica e modelo, alô ?? ), e fui puro js. Cada um dos meus modelos é armazenado em seu próprio arquivo html (./usersTable.row.html). Eu uso modelos apenas quando ajaxing conteúdo, e tenho poucos arquivos js "lógicos", um para tabelas, um para div, um para listas. e nem mesmo uma para as opções do select (onde utilizo outro método).

Cada vez que tentava fazer algo mais complexo, descobri que o código era menos claro e demorava mais para estabilizar do que fazer da maneira "antiga". A lógica no modelo é totalmente sem sentido, na minha opinião, e adicionar sua própria sintaxe adiciona apenas bugs muito difíceis de rastrear.

Roselan
fonte
14

jTemplates

um mecanismo de template para JavaScript.

Plugin para jQuery ...

Recursos:

  • 100% em JavaScript
  • pré-compilador
  • Suporte JSON
  • Trabalhe com Ajax
  • Permitir o uso de código JavaScript dentro do modelo
  • Permitir a construção de modelos em cascata
  • Permite definir parâmetros em modelos
  • Atualização ao vivo! - atualização automática de conteúdo do servidor ...
quadrado vermelho
fonte
8

Há um documento de discussão razoável sobre este tópico aqui , que cobre uma variedade de ferramentas de modelagem. Não é específico para jQuery, no entanto.

Marc Gravell
fonte
5

Plugin de modelos jQuery criado pela Microsoft e aceito como um plugin oficial do jQuery.

Mas observe que agora ele está obsoleto.

Andrey
fonte
13
e "obsoleto" desde então. O desenvolvimento foi interrompido e não sairá da versão beta. um ms guy e a equipe jquery-ui estão trabalhando em um novo modelo, baseado em JSRender;)
roselan
Uh, que chatice - Estou usando em todo o meu aplicativo da web :( Mas obrigado pela dica! Você tem um link sobre o mecanismo de modelos que você mencionou?
Andrey
1
se tudo correr bem, jsrender por boris moore encontrará o caminho para jquery-ui. Não precisa se apressar, eu acho;)
roselan
1
Implementei jsRender em um projeto e é simplesmente incrível. Vale a pena conferir.
ASeale
4

Gostaria de verificar json2html , ele dispensa ter que escrever trechos de HTML e se baseia em transformações JSON para converter array de objetos JSON em listas não estruturadas. Muito rápido e usa criação de DOM.

Chad Brown
fonte
4
aviso legal .. Eu escrevi isso. Mas vale a pena conferir;)
Chad Brown
3

Alguns anos atrás eu criei o IBDOM: http://ibdom.sf.net/ | A partir de dezembro de 2009, ele oferece suporte à vinculação jQuery se você obtê-lo diretamente do tronco.

$("#foo").injectWith(collectionOfJavaScriptObjects);

ou

$("#foo").injectWith(simpleJavaScriptObject);

Além disso, agora você pode colocar todos os marcadores "data: propName" nos atributos class = "data: propName other classnames", para que você não precise sujar o conteúdo do aplicativo com esses marcadores.

Eu ainda estou para atualizar um monte de documentação lá para refletir minhas melhorias recentes, mas tive várias versões deste framework em produção desde 2007.

Para os céticos desta questão:

Na época em que a Microsoft inventou com IE5 o que agora conhecemos como XmlHttpRequest e o padrão "ajax", parte da promessa por trás disso era puramente trocar dados entre um navegador da web e o servidor. Esses dados deveriam ser encapsulados em XML, porque em 1999/2000, XML era simplesmente muito quente. Além de recuperar um documento xml pela rede com um mecanismo de retorno de chamada, o componente MSXML ActiveX da MS também ofereceu suporte a uma implementação de pré-projeto do que agora conhecemos como XSL-T e XPath.

Combinar a recuperação de HTTP / XML, XPath e XSL-T proporcionou aos desenvolvedores uma tremenda criatividade para construir "documentos" ricos que se comportavam como "aplicativos", simplesmente enviando e, mais importante, recuperando dados do servidor.

Por que este é um padrão útil? Depende da complexidade da interface do usuário e do quanto você se preocupa com sua capacidade de manutenção.

Ao construir uma interface visualmente muito rica semanticamente marcada com CSS avançado, a última coisa que você quer fazer é dividir pedaços de marcação em "mini-controlador / visualizações", apenas para que você possa .innerHTML um fragmento de documento no principal documento e aqui está o porquê.

Um princípio fundamental para manter gerenciável uma interface de usuário html / css avançada é preservar sua validação pelo menos durante sua fase ativa de desenvolvimento. Se sua marcação for validada, você pode se concentrar nos bugs CSS. Agora, se fragmentos de marcação acabam sendo injetados durante vários estágios de interação do usuário, tudo se torna muito difícil de gerenciar e tudo fica frágil.

A ideia era ter todas as suas construções de IU de marcação em um único documento, recuperar SOMENTE DADOS pela rede e usar uma estrutura sólida que, no mínimo, injetará seus dados em suas construções de marcação e, no máximo, replicará as construções de marcação que você sinalizou como repetível.

Isso era possível com XSL-T e XPath no IE5 +, mas virtualmente nenhum outro navegador. Algumas estruturas de navegador F / OSS têm se aventurado com XPath, mas ainda não é algo em que possamos confiar.

Então, qual é a próxima melhor coisa para atingir esse padrão? IBDOM. Obtenha dados do seu servidor, injete-os no seu documento. sem esforço.

Chris Holland
fonte
mais uma coisa: IBDOM usa métodos DOM 100% puros e zero innerHTML.
Chris Holland,
outra observação: o IBDOM implementa o que chamo de "forkedLoopExecution", que é um componente usado internamente e também algo que pode ser usado por conta própria. Aqui estava o problema: digamos que você esteja modificando o DOM por meio de createElement e appendChild, em algum tipo de construção de loop que precisa passar por uma grande variedade de objetos de big data: a maioria dos navegadores não "redesenhará" a interface do usuário até o código que afeta o DOM "retorna". Em um grande "loop for" com muitos dados, nossos resultados de pesquisa podem levar de meio segundo a alguns segundos antes de exibir tudo de uma vez.
Chris Holland,
a solução: a execução de loop bifurcada aproveita a execução recursiva induzida por setTimeout ao longo da vida da coleta de dados repetidamente passada para essencialmente "retornar e redesenhar" em cada iteração de loop, dando a você esta sensação de renderização instantânea: "dê ao usuário algo para olhar -a merda agora ".
Chris Holland,
2

Você deve dar uma olhada em Javascript-Templates, este é um pequeno mecanismo de template usado dentro do famoso plugin jQuery File Upload, e desenvolvido pelo mesmo autor, Sebastian Tschan (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Siga o guia de uso feito por Sebastian, basta retirar esta linha

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Substitua por este

$('#result').html(tmpl('tmpl-demo', data));

Não se esqueça de adicionar a tag de resultado div em seu arquivo HTML também

<div id="result"></div>

Aproveitar

vinzcelavi
fonte