Mecanismos de modelagem jQuery [fechados]

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?

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.

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

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

Alguém pegou a solução de micro-modelagem da Resig e empacotou-a em um plugin jQuery.

Vou usá-lo até que Resig libere o seu (se ele soltar o seu).

Obrigado pela dica, ewbi.

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 ...

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/

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

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

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

Outros recursos

• Uma boa apresentação sobre o tópico http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Demonstrações de trabalho: http://borismoore.github.com/jsviews/demos/index.html

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.

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 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).

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

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

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.

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. Não notei nenhum problema com o IE7 ou o FF.

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.

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/ .

Dropbox usando o mecanismo de modelo de John Resig no site. Eles o modificaram um pouco, você pode verificar neste arquivo js do dropbox. Procure neste arquivo por tmpl e você codificará o mecanismo de modelo.

Obrigado. Espero que seja útil para alguém.

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!)

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.