HTML Templates in Javascript? Without coding in the page?

Question

I am a web guy doing mostly Perl server-side stuff, and I\'m slowly coming to a few conclusions.

• It is far better to do most of your code via Javascript and t

Answer 1

check out ibdom, and some background/history here: Recommended JavaScript HTML template library for JQuery?

Answer 2

There are several good ones out there:

Mustache.js
Pure.js
Json Template

If you want a jQuery version, Tempest looks good.

Answer 3

The 2 libs I know that do not mix template coding with HTML markups are chain.js and PURE

chain makes only DOM manipulations.
PURE uses a mix of DOM and innerHTML as the DOM alone can be slow to render bigger templates.

I'm the main contributor of PURE, and we created it to build a web app on the ajax model you describe.

Answer 4

Since there is no well defined API and a best library for templating, I would suggest you choose one that is actively developed. Below, I briefly explained two libraries that are actively being developed.

jQuery team decided that jQuery Templates will no longer be actively developed or maintained, thus I would strongly suggest NOT using it. See this blog entry.

You can use JsRender in accordance with JsViews to take full functionality provided by jQuery Templates and even more like data linking. You can find demos for JsRender and JsViews. I would suggest using these libraries since they are actively being developed by jQuery UI team but be aware that they are still not even beta!

Mustache is another templating solution that is actively being developed and it simplifies templates by combining conditional tags and enumeration tags. It also provides strong features like inverted sections, partials and high order sections with simple syntax. Mustache is also one of the fastest templating solutions See blog by Brian Landau. I, personally, find mustache a good templating solution since it has a simple syntax and performs well.

Answer 5

What about http://www.enfusion-framework.org

Stuff like this:

<span template>Our telephone number is {phone}.</span>

<span session>You are logged in as {nickname}.</span>

Answer 6

I have a templating engine called stencil.js, which I believe is pretty sweet. It works with jQuery via the jquery-haml DOM building engine.

Write your template (which you can put in an external file and decode as JSON):

["%div.sidebar_elem"
    ["%a", { href: { key:'link' } },
        { key: "text" }
    ]
]

And run it through stencil along with your data:

$("#parent").stencil(template, { link: "http://example.com", text: "Click me!" });

There are more examples at the stencil.js GitHub project, but I think it's just what you're looking for.

It could use a couple more utility methods, and some code for an unfinished data binding component is still in the master branch, so drop me a comment if you’re interested and I'll see if I can clean it up.