template engine

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

JavaScript HTML Template Engine

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Here’s a quick, dirty, reliable and library-independent client-side HTML template engine with support for prefetched templates (in a JavaScript object) and a few handy and extensible methods for compiling, adding and removing templates. Please, check the documentation in the source code and the examples at the bottom of this page for usage and more insight.

Supported Browsers

  • Mozilla Firefox
  • Google Chrome
  • Apple Safari
  • Opera
  • Internet Explorer 6-10

Please, follow @wemakesitesnet or check my website for more cool stuff.

Related Posts

Useful JavaScript Classes and Functions

  • Crossbrowser image reflections enabler JavaScript class.
  • JavaScript Mapper Class for RESTFul Methods – Recently I had to work with a bunch of RESTFul API methods, so instead of defining manually separate calls/methods for each API request, I decided to do it viceversa – to force JavaScript to create these methods automatically for me out of the RESTFul API by providing the URLS and other required data.
  • XML to JSON JavaScript Objectifier Class – Simple XML to JSON objectifier. It can be used with custom or public XML, REST APIs such as Last.FM, RSS and ATOM feeds, sitemaps, etc by converting the XML server responses to native JSON objects in the browser which are then instantly accessible by its simple to use JavaScript methods.
  • URI to JSON Serializer Class – Tiny JavaScript class, using the HTMLAnchorElement interface to convert URI string into a JSON object.  The object returned by the function contains hash, host, hostname, parameters key-value map, pathname, port and protocol. Works with all major browsers (Firefox, Chrome, Safari, Opera, IE6-10).
  • IMDB Fetcher – Experimental IMDB JavaScript and PHP API – Makes possible the execution of cross-domain AJAX queries to IMDB and returns a JSON data object for the requested movie. What is currently supported – movie title, poster, release date, description, actor(s), director(s), IMDB and MPAA rating, running time, etc.
  • Quick and Dirty Localization With JavaScript – A quick and dirty JavaScript localization routine that provides basic localization (no support for plurals, etc), operates on the DOM of the page and uses data-lang attribute for language keys storage. Lokalizr works with all major browsers, beginning with IE8.
  • JavaScript Instance Name Finder – Small JavaScript function that checks for instances of an object within a defined scope and returns an array of instances’ variable names that can be used for different purposes.
  • HTML5 Placeholder Enabler – The solution presented in this post checks for the availability of the placeholder attribute in textboxes, and if it is not available applies its content as value to the elements that contain it.
  • HTML 5 Details Element Enabler – According to WhatWG, the “<details /> element represents a disclosure widget from which the user can obtain additional information or controls“. In brief, you can use it to create panelbar elements without JavaScript, as the expand / collapse functionality is native to it. Currently (October, 2011), the only browser which supports <details /> is Google Chrome, so if you are eager to start using this element on your pages, you can do so with the help of a few lines of JavaScript to make sure it works on all browsers.
  • WebWorkers JavaScript class.
  • Classless JavaScript inheritance.
  • JavaScript class augmenter.
  • JavaScript API for TinyURL.
  • HTML Validation Bookmarklet.
  • JavaScript Template Engine.

Pisi HTML Template Engine 1.0 is Out!

Pisi is HTML templating engine that runs entirely in the browser. It can be used to scale down the size of ajax requests to the server by allowing them to switch from markup and data responses to data-only responses (for example JSON). Once fetched on the client, the data can be parsed by Pisi and converted to HTML and rendered on the page.

The syntax of Pisi is simple and intuitive, templates are cached on the client, so they can be used later, rendering process is fast, reliable and seamless.

Features

  • Easy and intuitive API.
  • Pure HTML with server-like function tags compiling to JavaScript.
  • Two types of templates – on-page and external.
  • Templates are compiled and cached for later use.
  • Fast and seamless execution parsing and rendering.
  • Support for different data types – variables, arrays, associative arrays (json), etc.
  • Any JavaScript can be embedded directly to the template.
  • Library-independent.
  • Only 3Kb minified and gzipped

Some Example Code

Template:

<script type="text/x-pisi-template" id="al_pacino_movies">
<h4>Al Pacino Movies</h4><ul>
<% for(var i = 0; i < pacino.length; i ++) { %>
    <li><a href="http://www.imdb.com/find?q=<%= pacino[i].replace(/\s/g, '+') %>&s=tt" title="Search IMDB for <%= pacino[i] %>" target="_blank"><%= pacino[i] %></a></li>
<% } %>
</ul></script>

Data Object:

var pacino = ["Serpico", "Dog Day Afternoon", "Scent of A Woman", "Insomnia", "Carlito's Way", "Heat"]

Template Call:

_pisi.setExternal([{
    template: "al_pacino_movies",
    data: pacino,
    callback: function(html) {
        document.getElementById("movies").innerHTML = html;
    }
]}

Rendered Markup:

<h4>Al Pacino Movies</h4>
<ul>
<li><a target="_blank" title="Search IMDB for Serpico" href="http://www.imdb.com/find?q=Serpico&amp;s=tt">Serpico</a></li>
    <li><a target="_blank" title="Search IMDB for Dog Day Afternoon" href="http://www.imdb.com/find?q=Dog+Day+Afternoon&amp;s=tt">Dog Day Afternoon</a></li>
    <li><a target="_blank" title="Search IMDB for Scent of A Woman" href="http://www.imdb.com/find?q=Scent+of+A+Woman&amp;s=tt">Scent of A Woman</a></li>
    <li><a target="_blank" title="Search IMDB for Insomnia" href="http://www.imdb.com/find?q=Insomnia&amp;s=tt">Insomnia</a></li>
    <li><a target="_blank" title="Search IMDB for Carlito's Way" href="http://www.imdb.com/find?q=Carlito's+Way&amp;s=tt">Carlito's Way</a></li>
    <li><a target="_blank" title="Search IMDB for Heat" href="http://www.imdb.com/find?q=Heat&amp;s=tt">Heat</a></li>
</ul>

If the above looks and sounds cool enough, you can go to Pisi’s home page, view the demo or download it and use it in your own projects. You can also check Templatr – another cool fully client-side JSON to HTML template engine by Acid.JS Web.UI.

Templatr HTML Template Engine 2.0 Has Been Released

I am happy to announce that just a few days after the debut of Templatr, version 2.0 has been released with tons of cool stuff. If you already know what is Templatr, just skip the next paragraphs and go directly to What’s New in Version 2.0:

What is Templatr?

Templatr is fully client-side, library-independent, lightweight (4KB minified and g-zipped), easy to use, reliable and free JSON to HTML template engine.

It can be used for scaling down AJAX-heavy applications allowing them to switch from markup- to data-only responses from the server. Once fetched on the client, the data can then be parsed and turned into beautiful HTML by Templatr and inserted in the page.

What’s New in version 2.0:

  • Now a JavaScript function returning HTML or setting more nested templates can be used for content of a parent template. Users now have three options for setting of content – a string, object (static nested templates) or function (static or fully dynamic nested templates).
  • Full support for Internet Explorer 6 and 7.
  • A few bugs have been addressed and fixed (related to the support for IE6 and 7).
  • Improved rendering speed and reliability.

Need more info? Go to Templatr’s home page, check out the demo or just download it right away! It is also included in the latest version of Acid.JS Web.UI Suite. The updated documentation can be found here.

Templatr – JSON to HTML Template Engine

Templatr is free, JSON-powered, fully client-side, library-independent, fast and responsive templating engine for HTML. It’s easy to define and use templates are parsed on the client and cached for later use. Ideally it can be used for AJAX-driven applications to reduce the requests to the server, as you can just get the data for the server and parse and render it entirely on the client by Templatr.

View demo of Templatr on this page, download it here or go to its help and manual page.