jsrender-hello world2

jsrender example

by Mel Milner

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<button id= "goBtn" class="btn btn-primary">go jsrender </button>

<div id="output"></div>
<script id="template" type="text/x-jsrender">
    <ul>
        {{for people}}
            <li> 
                {{:name}} likes to wear {{:shirtcolor}} shirts
            </li>
        {{/for}}
    </ul>
</script>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

JavaScript

var data = {
    people: [
        {
            name:"frank bough",
            shirtcolor:"red"
        },
            {
            name:"jim slade",
            shirtcolor:"blue"
        },

            {
            name:"frank jones",
            shirtcolor:"green"
        }
        
        ]    
};

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