motores jQuery templates [fechado]

https://stackoverflow.com/questions/170168

05-07-2019
|

Pergunta

Eu estou procurando um modelo de motor para o lado uso do cliente. Eu tenho tentado alguns como jsRepeater e jQuery Templates. Enquanto eles parecem funcionar bem no FireFox todos eles parecem quebrar no IE7 quando se trata de prestação de tabelas HTML.

Eu também dei uma olhada no MicrosoftAjaxTemplates.js (de http: / /www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ), mas acontece que tem o mesmo problema.

Qualquer conselhos sobre outros motores de templates para uso?

Solução

Confira pós Cliente Templating de Rick Strahl com jQuery . Ele explora jTemplates, mas, em seguida, faz um caso melhor para John Resig micro-templates solução , até mesmo melhorá-lo um pouco. Boas comparações, os lotes de amostras.

Outras dicas

Apenas fiz alguma pesquisa sobre isso e eu vou estar usando jquery-tmpl . Por quê?

É escrito por John Resig.
Vai ser mantidas pelo time jQuery núcleo como um plug-in "oficial". EDIT:. A equipe do jQuery rejeitam esse plug-in
É um equilíbrio perfeito entre simplicidade e funcionalidade.
Tem uma sintaxe muito limpo e bem pensado.
O HTML-codifica por padrão.
É altamente extensível.

Mais aqui: http://forum.jquery.com/topic/templating-syntax

jQote: http://aefxx.com/jquery-plugins/jqote/

Alguém tomou solução micro-templates de Resig e embalados-lo em um plugin jQuery.

Eu vou estar usando isso até Resig lança seu próprio (se ele lança seu próprio).

Obrigado pela dica, ewbi.

jQuery Nano :

Template Motor

Uso Básico

Supondo que você seguinte resposta JSON:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

você pode fazer:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

e você terá seqüência pronto:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

A página de teste ...

jQuery-tmpl será no núcleo jQuery partir de jQuery 1.5:

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

A documentação oficial está aqui:

http://api.jquery.com/category/plugins/templates/

EDIT:. Tem sido deixado de fora do jQuery 1.5 e agora será coordenado pela equipe jQuery UI, pois será uma dependência da próxima jQuery UI grade

http: // blogue .jquery.it / 2011/04/16 / oficiais-plugins-a-change-in-the-roteiro /

Não tenho certeza como ele lida com seu problema específico, mas há também o PURE modelo de motor.

Depende de como você define o "melhor", consulte o meu post aqui sobre o tema

Se você olhar para o mais rápido , aqui está uma boa , parece que DoT vitórias, e as folhas de todos os outros para trás

Se você está procurando o máximo funcionário JQuery plugin, aqui é o que eu descobri

Parte I: JQuery Modelos

O beta, temporariamente oficial JQuery modelo plug-in foi esta http://api.jquery.com/category/plugins/templates/

Mas, aparentemente, não muito tempo atrás foi decidido mantê-lo em Beta ...

Nota: A equipe jQuery decidiu não tomar esta beta passado plugin. Ele não está mais sendo ativamente desenvolvido ou mantido. os docs permanecer aqui para o momento (para referência) até um adequado modelo de substituição plug-in está pronto.

Parte II: O próximo passo

O novo roteiro parecem visar para um novo conjunto de plugins, JSRender (independente do DOM e até mesmo JQuery motor de renderização do modelo) e JSViews que tem ligação alguns dados agradáveis ??e observador / implementação padrão observável

Aqui está o post sobre o tema

http://www.borismoore.com/2011/10/jquery -templates-e-jsviews-roadmap.html

E aqui é a mais recente fonte

Outros recursos

Uma apresentação agradável sobre o tema http://www.slideshare.net/ BorisMoore / jsviews-next-generation-jquery-modelos
demos Trabalho: http://borismoore.github.com/jsviews/demos/index.html

Nota ainda não é mesmo em beta, e só um mapa item de estrada, mas parece ser um bom candidato para se tornar uma extensão oficial JQuery / jQueryUI para modelos e UI de ligação

http://garann.github.com/template-chooser/ este link é realmente útil para a seleção de um modelo base Javascript.

Apenas para ser o tolo ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;)

Isso não é específico jsquery, mas aqui está uma biblioteca de templates baseado em JS lançado pelo Google como fonte aberta:

http://code.google.com/p/google-jstemplate/

Isto permite usar elementos DOM como modelos, e é re-entrantes (em que a saída de um rendering modelo ainda é um modelo que pode ser re-processado com um modelo de dados diferente).

Outros apontaram jquery-tmpl, e eu upvoted aqueles resposta. Mas não se esqueça de ter um olhar para garfos github.

Há correções importantes lá fora e características interessantes também. http://github.com/jquery/jquery-tmpl/network

John Resig tem um que é que ele postou em seu blog. http://ejohn.org/blog/javascript-micro-templating/

Se você estiver trabalhando no .NET Framework 2.0 / 3.5, você deve dar uma olhada JBST como implementado por http://JsonFx.net . Ele tem uma solução de modelagem do lado do cliente que tem familiarizado sintaxe JSP / ASP, mas é pré-compilado em tempo de compilação para modelos de cache-capazes compactas que não precisam de ser analisado em tempo de execução. Ele funciona bem com jQuery e outras bibliotecas JavaScript como os modelos em si são compilados para puro JavaScript.

Eu estava usando jTemplates jQuery pluging mas o desempenho foi muito ruim. Mudei para trimpath ( http://code.google.com/p/trimpath/wiki / JavaScriptTemplates ), que tem um desempenho muito melhor. Eu não tenho notado qualquer problema com o IE7 ou FF.

Por muito leve trabalho jquery-tmpl é adequado, mas exige, em alguns casos que os dados sei como formatar si (coisa ruim!).

Se você está procurando um templates featured mais completo plug-in eu sugiro Orange-J . Foi inspirado por Freemarker. Ele suporta if, else, loops de mais de objetos e matrizes, javascript in-line, incluindo padrões dentro de padrões e tem excelentes opções de formatação para a saída (maxlen, wordboundary, htmlentities, etc).

Oh, e fácil de sintaxe.

Você pode querer pensar um pouco como você deseja criar seus modelos.

Um problema com muitas das soluções de modelo listados (jQote, jquery-TMPL, jTemplates) é que eles exigem que você insira não-HTML em seu HTML, que pode ser uma dor para trabalhar com ferramentas HTML ou em um processo de desenvolvimento com designers HTML. Eu, pessoalmente, não gosto da sensação de que a abordagem, embora tem seus prós e contras.

Há uma outra classe de modelo se aproxima de que o uso de HTML normal, mas permitem-lhe indicar ligações de dados com atributos de elementos, classes CSS, ou mapeamentos externos.

Knockout é um bom exemplo desta abordagem, mas eu não usei isso mesmo que eu estou deixando isso para os votos para decidir se os outros gostam ou não. Pelo menos até que eu tenha tempo para brincar com ele mais.

PURE listado como outra resposta é outro exemplo desta abordagem.

Para referência, você pode também olhar para chain.js , mas não parece ter sido atualizado muito desde seu lançamento original. Para mais informação sobre ele ver http://javascriptly.com/2008/ 08 / a-melhor-javascript-template-engine / .

Dropbox usando modelo de motor de John Resig no site. Eles têm pouco modificado que você pode conferir neste arquivo js da caixa de depósito. Pesquisar neste arquivo para tmpl e você vai Código de modelo de motor.

Graças. Espero que seja útil para alguém.

Atualmente estou usando um quadro de vários templates HTML. Este quadro torna muito mais fácil de importar dados templated em sua DOM. Também grande modelagem MVC.

http://www.enfusion-framework.org/ (olhada nas amostras!)

Há também uma reescrita do PURE por beebole - jQuery modelos HTML puro - https: // github .com / mpapis / jquery-puro-modelos

Deve permitir muito mais automática prestação principalmente usando seletores jQuery, o que é mais importante não requer colocar fantasia coisas em HTML.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow