SO Question #4570097

by andrewwhitaker

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    </head>
    <body>
        
        <script id="movieTemplate" type="text/x-jquery-tmpl"> 
            <li class="${Year >= 1990 ? 'orange' : 'yellow'}">
                Title: ${Name}.
                {{each Languages}}
                ${$index + 1}: <em>${$value}. </em>
                {{/each}}
            </li>
        </script>
        
        <ul id="movieList"></ul>
        
    </body>
</html>

CSS

.orange { background-color: orange;}
.yellow { background-color: yellow;}

JavaScript

var movies = [
    {
    Name: "Meet Joe Black",
    Languages: ["French"],
    Year: 1990},
{
    Name: "The Mighty",
    Languages: [],
    Year: 1985},
{
    Name: "City Hunter",
    Languages: ["Mandarin", "Cantonese"],
    Year: 1994}
];

$("#movieTemplate").tmpl(movies).appendTo("#movieList");