Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
John Resig's Simple Javascript Templating turned into a jQuery Plugin
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.markdown
jquery.srender.js

README.markdown

Srender to Simple Javascript Templating...

photo by kiddharma

This is a jQuery plugin for javascript templating adapted from John Resig's classic templating blog post. The code works mostly like Resig describes in that post with a few tiny changes. Properties of the data object are available to the template directly as variables scoped to the function. The usage is as follows:

var someData = {foo : "bar"}
var template = "my data: <%= foo %>"
console.log($.srender(template, someData));

If you pass it a jQuerified element as the optional third argument, it will populate that element with the results thusly:

var someData = {foo : "bar"}
var template = "my data: <%= foo %>"
$.srender(template, someData, $("h1"));

You can also iterate through objects, do other command structures, and basically just run real javascript:

var someData = {foo : "bar", collection : [1,2,3,4]};
var template = (<r><![CDATA[
<% for ( var i = 0; i < collection.length; i++ ) { %>
  <% if(collection[i] != 2 ){ %>
    <li><%= collection[i] %></li>
    <% } %>
<% } %>
]]></r>).toString();
console.log($.srender(template, someData));

E4X is a nice choice to give a heredoc-style syntax to the templates. For more on E4X, check out this excellent resource.

Or, if you're a sissy who runs a browser that can't handle E4X, the '\' escaped new line syntax isn't too bad either:

var template = '<% for ( var i = 0; i < collection.length; i++ ) { %>\
                  <% if(collection[i] != 2 ){ %>\
                    <li><%= collection[i] %></li>\
                    <% } %>\
                <% } %>'
Something went wrong with that request. Please try again.