Mecanismos de modelagem jQuery [fechados]


204

Estou procurando um mecanismo de modelo para usar o lado do cliente. Eu tenho tentado alguns como jsRepeater e jQuery Templates. Embora eles pareçam funcionar bem no FireFox, todos parecem quebrar no IE7 quando se trata de renderizar tabelas HTML.

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.

Algum conselho sobre outros motores de modelos para usar?


1
Eu queria upvode esta pergunta duas vezes :)
Mark Schultheiss

1
Gostaria de verificar o muito bom (mas pré-beta) JSViews e JSRender, parecer como um potencial mecanismo oficial de templates JQuery / UI (pelo menos isso é o que a palavra roadmap)
Eran Medan

1
O JsRender agora tem um candidato beta público: borismoore.com/2012/03/…
John Papa

Eu estou usando modelos DoT agora, bom desempenho e bigode como notação
Eran Medan

Respostas:


109

Confira a publicação de Rick Strahl no cliente Templating com jQuery . Ele explora o jTemplates, mas faz um argumento melhor para a solução de micro-modelos de John Resig , até melhorando-a um pouco. Boas comparações, muitas amostras.


3
github.com/jquery/jquery-tmpl é o repositório real do plug-in de modelos do Resig.
Alexander Bird

@ Thr4wn, a fonte no repro é significativamente maior que a biblioteca discutida nos artigos vinculados. Tanto por Resig, com certeza.
Frank Schwieterman

@Frank ", a fonte do repro é significativamente maior do que a biblioteca discutida nos artigos vinculados" Um huh? Diga o quê? Não tenho certeza do que você quer dizer com isso.
Mark Schultheiss

2
@ Mark: ele quis dizer "significativamente diferente do que".
Domenic

Não vi nenhum exemplo de formulários complexos sendo construídos com isso. Alguém já explorou o que seria necessário para, por exemplo, adicionar uma linha, parte de um modelo inteiro, para acomodar um novo elemento no formulário vinculado à matriz de um objeto? O modelo incluiria a modelagem dos índices de elementos de matrizes e poderia ser serializado corretamente para POST. Mas estou tendo problemas para pensar em tudo. O objetivo é a funcionalidade semelhante ao InfoPath. (Eu estou ciente das várias funcionalidades do InfoPath existentes e alternativas InfoPath.)
Jason Kleban

47

Acabei de fazer uma pesquisa sobre isso e vou usar o jquery-tmpl . Por quê?

  1. É escrito por John Resig.
  2. Ele será mantido pela equipe principal do jQuery como um plugin "oficial". EDIT: A equipe do jQuery reprovou este plugin.
  3. Ele alcança um equilíbrio perfeito entre simplicidade e funcionalidade.
  4. Tem uma sintaxe muito limpa e bem pensada.
  5. Ele codifica HTML por padrão.
  6. É altamente extensível.

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


+1. Mas eu usei o de Rick Strahl. Bcoz é pequeno e serve bem ao meu propósito.
IsmailS

acabou de ser anunciado que agora é um plugin oficial
serg

20
Infelizmente, foi depreciado . qualquer forker?
usar o seguinte

3
O cenário mudou agora em 2012, quero dizer, existem soluções melhores para modelagem usando bibliotecas desenvolvidas sobre o script original da resig?
Rajat Gupta

4
@OnesimusUnbound Foi super-propagado pelo JS Render. github.com/BorisMoore/jsrender
Blowsie


17

jQuery Nano :

Mecanismo de modelo

Uso básico

Supondo que você tenha a 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ê prepara a string:

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

Página de teste ...


Isto não fazer estruturas de controlo (IFS e loops)
mahemoff

13

O jQuery-tmpl estará no núcleo do jQuery a partir do 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: Foi deixado de fora do jQuery 1.5 e agora será coordenado pela equipe da interface do usuário do jQuery, pois será uma dependência da próxima grade da interface do usuário do jQuery.

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/


11

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


além de suas limitações, o PURE é muito fácil de usar
Jader Dias

@Jader, que limitações são as mais dolorosas?
Mic

O @Mic PURE é limitado pelo design. Nos mecanismos de modelo do servidor, você não precisa se ater ao HTML válido, mas o PURE é baseado em HTML. Mas acho que existem peculiaridades que permitiriam que outro mecanismo de modelo javascript fosse tão poderoso quanto os do lado do servidor.
Jader Dias

@ Jader, ok apenas para HTML. Mas eu não entendi o que você quer dizer com peculiaridades e outro mecanismo.
Mic

O @Mic PURE deve ser reescrito do zero para permitir a inclusão de alguns recursos. Para permitir modelos HTML inválidos, você deve usar scripttags com atributos typediferentes de text/javascript. Essa é uma "peculiaridade" que permitiria HTML inválido.
Jader Dias

7

Depende de como você define "melhor", por favor, veja meu post aqui no tópico

Se você procurar o mais rápido , aqui está uma boa referência , parece que o DoT vence e deixa todo mundo para trás

Se você está procurando o mais oficial plugin JQuery , aqui está o que eu descobri

Parte I: Modelos JQuery

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

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

Nota: A equipe do jQuery decidiu não usar este plugin além da versão beta. Não está mais sendo desenvolvido ou mantido ativamente. Os documentos permanecem aqui por enquanto (para referência) até que um plug-in de modelo de substituição adequado esteja pronto.

Parte II: O próximo passo

O novo roteiro parece ter como objetivo um novo conjunto de plugins, JSRender (independente do DOM e até do mecanismo de renderização de modelo JQuery) e JSViews que possuem uma boa ligação de dados e implementação de padrão observador / observável

Aqui está a postagem do blog sobre o tópico

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

E aqui está a fonte mais recente

Outros recursos

Observe que ainda não está na versão beta e é apenas um item do roteiro, mas parece ser um bom candidato para se tornar uma extensão oficial do JQuery / JQueryUI para modelos e ligação à interface do usuário.


4

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/ ;)


3

Isso não é específico ao jsquery, mas aqui está uma biblioteca de modelos baseada em JS, lançada pelo google como código-fonte aberto:

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

Isso permite o uso de elementos DOM como modelos e é reentrante (na medida em que a saída de uma renderização de modelo ainda é um modelo que pode ser renderizado novamente com um modelo de dados diferente).


2

Outros apontaram jquery-tmpl, e eu votei positivamente nessas respostas. Mas não deixe de dar uma olhada nos garfos do github.

Existem correções importantes por aí e recursos interessantes também. http://github.com/jquery/jquery-tmpl/network


1
Algum garfo em particular para procurar correções?
precisa saber é o seguinte

TBH, está um pouco bagunçado ... Eu fui ao github.com/appendto/jquery-tmpl após uma rápida verificação das alterações e considerando o fato de que o appendto é uma empresa. YMMV
Yann

O jquery-tmpl foi dobrado na distribuição oficial 1.4.3.
Yann


1

Se você estiver trabalhando no .NET Framework 2.0 / 3.5, consulte o JBST conforme implementado em http://JsonFx.net . Ele possui uma solução de modelagem do lado do cliente que possui sintaxe JSP / ASP familiar, mas é pré-compilada no momento da construção para modelos compactos capazes de cache que não precisam ser analisados ​​em tempo de execução. Funciona bem com jQuery e outras bibliotecas JavaScript, pois os próprios modelos são compilados para JavaScript puro.



1

Para trabalhos muito leves, o jquery-tmpl é adequado, mas em alguns casos é necessário que os dados saibam como se formatar (coisa ruim!).

Se você estiver procurando por um plugin de modelos mais completo, sugiro o Orange-J . Foi inspirado no Freemarker. Ele suporta se, além disso, faz um loop sobre objetos e matrizes, javascript embutido, incluindo modelos dentro de modelos e possui excelentes opções de formatação para saída (maxlen, wordboundary, htmlentities, etc.).

Ah, e sintaxe fácil.


0

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

Um problema com muitas das soluções de modelos listadas (jQote, jquery-tmpl, jTemplates) é que elas exigem que você insira não HTML em seu HTML, o que pode ser uma tarefa difícil de trabalhar em ferramentas HTML ou em um processo de desenvolvimento com designers de HTML . Pessoalmente, não gosto da sensação dessa abordagem, embora ela tenha seus prós e contras.

Há outra classe de abordagens de modelo que usam HTML normal, mas permitem indicar ligações de dados com atributos de elemento, classes CSS ou mapeamentos externos.

O nocaute é um bom exemplo dessa abordagem, mas eu não a usei, portanto, estou deixando a votação para decidir se os outros gostam ou não. Pelo menos até eu ter tempo para brincar mais.

O PURE listado como outra resposta é outro exemplo dessa abordagem.

Para referência, você também pode consultar o chain.js , mas ele não parece ter sido atualizado muito desde o lançamento original. Para obter mais informações, consulte http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .



0

Atualmente, estou usando uma estrutura de modelos em HTML múltiplo. Essa estrutura facilita muito a importação de dados de modelo no seu DOM. Também excelente modelagem MVC.

http://www.enfusion-framework.org/ (veja as amostras!)


-1

Também há uma reescrita do PURE por beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

Deve permitir uma renderização muito mais automática, principalmente usando seletores jquery, o que é mais importante que não é necessário colocar coisas sofisticadas em HTML.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.