NANO - jQuery 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("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

and you get ready string:

<p>Hello Thomas! Your account is <strong>active</strong></p>

Simple huh?

More Advanced Example

Displaying list of twitter search results (JSONP API)

html

  <ul id="tweets"></ul>

javascript

  
  var template = "<li><strong>@{from_user}</strong> {original_text}</li>"
  var query = "beer OR vodka"
  var container = $("ul#tweets")

  $.getJSON("http://search.twitter.com/search.json?callback=?", {
      q: query
    }, function(data) {
      container.html("")
      $.each(data.results), function(i, item){
        container.append($.nano(template, item))
      }
    }
  }