ChatGPT解决这个技术问题 Extra ChatGPT

jQuery templating engines [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers. We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations. Closed 5 years ago. Improve this question

I am looking for a template engine to use client side. I have been trying a few like jsRepeater and jQuery Templates. While they seem to work OK in FireFox they all seem to break down in IE7 when it comes down to rendering HTML tables.

I also took a look at MicrosoftAjaxTemplates.js (from http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766) but turns out that has the same problem.

Any advice on other templating engines to use?

I wanted to upvode this question twice :)
I would check the very nice (but pre-beta) JSViews and JSRender, seem like a potential official JQuery/UI templating engine (at least this is what the roadmap say)
JsRender now has a public beta candidate: borismoore.com/2012/03/…
I'm using DoT templates now, good performance, and Mustache like notation

a
alex

Check out Rick Strahl's post Client Templating with jQuery. He explores jTemplates, but then makes a better case for John Resig's micro-templating solution, even improving it some. Good comparisons, lots of samples.


github.com/jquery/jquery-tmpl is the actual repo of Resig's templating plugin.
@Thr4wn, the source at the repro is significantly then the library discussed in the linked articles. Both by Resig though, sure.
@Frank "the source at the repro is significantly then the library discussed in the linked articles" Um huh? Say what? Not sure what you mean by this at all.
@Mark: he meant "significantly different than."
I haven't seen any examples of complex forms being built with this. Has anyone explored what it would take to i.e. add a row, some part of a whole template, to accommodate a new element in the form's bound a object's array? The template would include templating the element indexes of arrays and could be properly serialized for POSTing. But I'm having trouble thinking it all through. The goal is InfoPath-like functionality. (I'm aware of the various existing infopath features and infopath alternatives.)
T
Tom Leys

Just did some research on this and I'll be using jquery-tmpl. Why?

It's written by John Resig. It'll be maintained by the core jQuery team as an "official" plugin. EDIT: The jQuery team have deprecated this plugin. It strikes a perfect balance between simplicity and functionality. It has a very clean and well thought out syntax. It HTML-encodes by default. It's highly extensible.

More here: http://forum.jquery.com/topic/templating-syntax


+1. But I used Rick Strahl's. Bcoz it's a small one and serves my purpose well.
it was just announced that this is now official plugin
Unfortunately, it was depreciated. any forker?
Has the scenario changed now in 2012, i mean, are there better solutions to templating by using libraries developed on top of resig's original script ?
@OnesimusUnbound It has been super-seeded by JS Render. github.com/BorisMoore/jsrender
K
KevBurnsJr

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

Someone took Resig's micro-templating solution and packaged it into a jQuery plugin.

I'll be using this until Resig releases his own (if he releases his own).

Thanks for the tip, ewbi.


This has now become jQote2: aefxx.com/jquery-plugins/jqote2
g
gnat

jQuery Nano:

Template Engine Basic Usage Assuming you have following JSON response: data = { user: { login: "tomek", first_name: "Thomas", last_name: "Mazur", account: { status: "active", expires_at: "2009-12-31" } } } you can make: nano("

Hello {user.first_name} {user.last_name}! Your account is {user.account.status}

", data) and you get ready string:

Hello Thomas Mazur! Your account is active

Test page...


This doesn't do control structures (ifs and loops)
j
jonsequitur

jQuery-tmpl will be in the jQuery core beginning in jQuery 1.5:

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

The official documentation is here:

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

EDIT: It's been left out of jQuery 1.5 and will now be coordinated by the jQuery UI team, as it will be a dependency of the upcoming jQuery UI Grid.

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


C
Chris Vest

Not sure how it handles your specific problem, but there's also the PURE template engine.


besides its limitations, PURE is very easy to use
@Jader, what limitations are the most painful?
@Mic PURE is limited by design. In server-side template engines you don't have to stick to valid HTML, but PURE is based on HTML. But I think there are quirks that would a allow another javascript template engine to be as powerful as the server side ones.
@Jader, ok for HTML only. But I didn't get what do you mean by quirks and another engine.
@Mic PURE should have to be rewritten from scratch to allow some features to be included. To allow invalid HTML templates you should use script tags with attribute type different from text/javascript. This is one "quirk" that would allow invalid HTML.
E
Eran Medan

It depends on how you define "best", please see my post here on the topic

If you look for the fastest, here is a nice benchmark, it seems that DoT wins, and leaves everyone else behind

If you are looking for the most official JQuery plugin, here is what I found out

Part I: JQuery Templates

The beta, temporarily-official JQuery template plugin was this http://api.jquery.com/category/plugins/templates/

But apparently, not too long ago it was decided to keep it in Beta...

Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready.

Part II: The next step

The new roadmap seem to aim for a new set of plugins, JSRender (independent of DOM and even JQuery template rendering engine) and JSViews which have some nice data binding and observer / observable pattern implementation

Here is the blog post on the topic

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

And here is the latest source

JSViews https://github.com/BorisMoore/jsviews

JSRender https://github.com/BorisMoore/jsrender

Other resources

A nice presentation on the topic http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

Working demos: http://borismoore.github.com/jsviews/demos/index.html

Note it's still not even in beta, and only a road map item, but seems like a good candidate to become an official JQuery/JQueryUI extension for templates and UI binding


m
molokoloco

Only to be the foolish ^^

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


l
levik

This isn't jsquery specific, but here's a JS-based templating library released by google as open source:

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

This allows using DOM elements as templates, and is re-entrant (in that the output of a template rendering is still a template that can be re-rendered with a different data model).


Y
Yann

Others have pointed jquery-tmpl, and I have upvoted those answer. But be sure to have a look at github forks.

There are important fixes out there and interesting features too. http://github.com/jquery/jquery-tmpl/network


Any particular fork to look at for fixes?
TBH, it's a bit messy... I went for github.com/appendto/jquery-tmpl after a quick scan on the changes and considering the fact that appendto is a company. YMMV
jquery-tmpl has been folded in the official 1.4.3 distribution.
m
morgancodes

John Resig has one that's he's posted on his blog. http://ejohn.org/blog/javascript-micro-templating/


m
mckamey

If you're working in the .NET Framework 2.0/3.5, you should take a look at JBST as implemented by http://JsonFx.net. It has a client-side templating solution that has familiar JSP/ASP syntax but is precompiled at build-time for compact cache-able templates that don't need to be parsed at runtime. It works well with jQuery and other JavaScript libraries as the templates themselves are compiled to pure JavaScript.


E
EShy

I was using jtemplates jquery pluging but the performance was really bad. I switched to trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates) which has much better performance. I haven't noticed any issues with IE7 or FF.


D
Donovan Walker

For very light work jquery-tmpl is adequate, but it requires in some cases that the data know how to format itself (bad thing!).

If you're looking for a more full featured templating plugin I'd suggest Orange-J. It was inspired by Freemarker. It supports if, else, loops over objects & arrays, inline javascript, including templates within templates and has excellent formatting options for output (maxlen, wordboundary, htmlentities, etc).

Oh, and easy syntax.


s
studgeek

You may want to think a bit how you want to design your templates.

One issue with many of the listed template solutions (jQote, jquery-tmpl, jTemplates) is they require you to insert non-HTML in your HTML, which can be a pain to work with in HTML tools or in a development process with HTML designers. I personally don't like the feel of that approach, though it has its pros and cons.

There is another class of template approaches that use normal HTML, but allow you to indicate data bindings with element attributes, CSS classes, or external mappings.

Knockout is a good example of this approach, but I have not used it myself so I am leaving it to the votes to decide if others like it or not. At least until I have time to play with it more.

PURE listed as another answer is another example of this approach.

For reference you can also look at chain.js, but it doesn't seem to have been updated much since its original release. For more background on it see http://javascriptly.com/2008/08/a-better-javascript-template-engine/.


s
s-sharma

Dropbox using John Resig's template engine on website. They have little bit modified it you can check in this js file of dropbox. Search in this file for tmpl and you will code of template engine.

Thanks. Hope it will be useful for someone.


B
Bny

I'm currently using a multi HTML templating framework. This framework makes it a lot easier to import templated data in your DOM. Also great MVC modeling.

http://www.enfusion-framework.org/ (look at the samples!)


m
mpapis

There is also an rewrite of PURE by beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

It should allow a lot more automatic rendering mostly using jquery selectors, whats more important it does not require to put fancy things into HTML.