JSRender Demo

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="person"></div>

<script id="personTemplate" type="text/x-jsrender">
  {{:~format(name, true)}}
  <br>
</script>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">

<br>
{{:~label("Name")}}
{{:~input(name, true)}}
{{:~label("Car")}}
{{:~select(car, true, "Volvo", "SAAB", "BMW")}}

</script>

<script>
  var data = [

    {
      "name": "Pete",
      "address": {
        "street": "12 Pike Place",
        "city": "Seattle",
        "ZIP": "98101"
      },
      "car":"Volvo"
    },
    {
      "name": "Heidi",
      "address": {
        "street": "5000 Broadway",
        "city": "Sidney",
        "country": "Australia"
      },
      "car":"BMW"
    }
  ];
  
  var data2 = [
  {
    "name": "Robert",
    "nickname": "Bob",
    "showNickname": true
  },
  {
    "name": "Susan",
    "nickname": "Sue",
    "showNickname": false
  }
];

var data3=[{"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}}];  
  
   function myFormatFunction(val) {
    //return "<p>hello</p>";
    return "<p>" + val + "</p><input type='text' name='fname' value="+val+"><br> ";
  }
  
  function myInputFunction(value, disabled) {
  
  	var addDisabled = " "; 
    
    if(disabled){
    		addDisabled = "disabled";
    }
		
  	return "<input type='text' name='fname'...

CSS

body {margin: 15px;}

JavaScript

function myFormatFunction(value, upper) {
	var txt =  "<p>Text.</p>" + value;
  return upper ? txt.toUpperCase() : txt.toLowerCase();
};

var myHelpers = {format: myFormatFunction};
$.views.helpers(myHelpers);

var html = $("#personTemplate").render({name: "Robert"});
$("#person").html(html);

var data = {
    people: [{
        name: 'Dan Wahlin',
        shirtColor: 'white'},
    {
        name: 'John Papa',
        shirtColor: 'black'},
    {
        name: 'Scott Guthrie',
        shirtColor: 'red'}
            ]
};

$('#goBtn').click(function() {
    $('#output').html($('#template').render(data));
});

$('#clearBtn').click(function() {
    $('#output').html('');
});