jquery-tmpl

li

by ysuper

HTML

<html>

  <head>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
  </head>

  <body>
    <div id="movieList"></div>
  </body>

</html>

JavaScript

var movies = [{
    Name: "The Red Violin",
    ReleaseYear: "1998"
  },
  {
    Name: "Eyes Wide Shut",
    ReleaseYear: "1999"
  },
  {
    Name: "The Inheritance",
    ReleaseYear: "1976"
  }
];

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

/* Compile the markup as a named template */
$.template("movieTemplate", markup);

/* Render the template with the movies data and insert
	   the rendered HTML under the "movieList" element */
$.tmpl("movieTemplate", movies)
  .appendTo("#movieList");