Parand
Parand

Reputation: 106280

Minimalist, Tiny Javascript Template System?

I'm looking for a minimalist template system for javascript, ala John Resig's Javascript Micro Templating. The smaller the better, and if it's jquery based even better. Recommendations?

I tried John's micro-templating but ran into a few issues, wanted to see if there are more baked / better packaged solutions out there.

[Update] I tried Resig's Micro Templating again and it's working well for me. Would still like to hear about other alternatives if there are any.

Upvotes: 8

Views: 4114

Answers (6)

nanobar
nanobar

Reputation: 66355

This one is good and tiny (400bytes gzipped or 600bytes minified). Also has the attractive {{hello}} syntax rather than the <?php hideous ?> <%whats-the-point-might-as-well-not-bother-with-templates%> syntax

https://github.com/jasonmoo/t.js

Slightly larger but still very good (personally only tested mustache):

https://github.com/janl/mustache.js

http://tempojs.com/

https://github.com/premasagar/tim (370 bytes for the 'tinytim' version)

Upvotes: 3

mckamey
mckamey

Reputation: 17529

JBST (JsonML+Browser-Side Templating) is a good alternative to John Resig's Micro Template. It has a similar syntax but template parsing is not performed at runtime so it can be more compact and robust. The result of parsing is pure JavaScript which can be combined with other scripts and executed directly in the browser.

UPDATE: this system was rewritten from the ground up as a duel-side template library (client & server) called DUEL: http://duelengine.org

Upvotes: 1

Chubas
Chubas

Reputation: 18043

There is also Mustache.js, it has a neat syntax IMO.

Upvotes: 5

stevedbrown
stevedbrown

Reputation: 8934

I really like JST (JavaScript Templates). They use the same convention for tokens as JSPs ${} - pretty easy.

Upvotes: 0

Parand
Parand

Reputation: 106280

In the end I went with John Resig's Micro Template, it's working nicely for me.

Upvotes: -3

Francisco Aquino
Francisco Aquino

Reputation: 9117

Theres JBST

<a class="ExtLink"
            href="<%= "http://en.wikipedia.org/wiki/" + this.data.wiki %>"
            onclick="window.open(this.href);return false;"><%= this.data.name %></a>

Upvotes: 1

Related Questions