I am wondering why the li is not getting appended.
<! DOCTYPE html>
<html>
<head>
<title>Trying out knockout</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
<script type="text/javascript" src="knockout-1.1.2.debug.js"></script>
<script type="text/javascript">
var viewModel ={
personName:ko.observable('Stan Marsh'),
personAge:ko.observable(28),
grades:[
{subject:"Math",grade:'A'},
{subject:"Physics",grade:'B'},
{subject:"Chemistry",grade:'A'},
{subject:"Biology",grade:'A'}
]
};
$(document).ready(function (){
// Apply knockout bindings
ko.applyBindings(viewModel);
// Apply templates
function renderList() {
$("#tmplGrades").tmpl(viewModel.grades).append("#ulGradeList");
};
// Event Wireup
$('#btnViewChanges').click(function(){
var message = "New Name:"+viewModel.personName()+" and New Age:"+ viewModel.personAge();
alert(message);
});
});
</script>
<script id="tmplGrades" type="text/html">
{{each viewModel.grades}}<li>Subject: ${subject} , Grade: ${grade}</li>
</script>
</head>
<body>
<fieldset>
<legend>Person</legend>
<p>
<label for="tbPersonName">Name:</label>
<input type="text" id="tbPersonName" data-bind="value:personName" />
</p>
<p>
<label for="tbAge">Age:</label>
<input type="text" id="tbAge" data-bind="value:personAge" />
</p>
<input type="button" id="btnViewChanges" value="View Changes"/>
</fieldset>
<ul id="ulGradeList">
</ul>
</body>
</html>
Here is a sample that works: http://jsfiddle.net/rniemeyer/ztgfG/
It looks like in your code the template rendering was in a function called renderList() that was not being called. Additionally, if you pass an array to the template rendering, it will automatically do it for each item in the array, so you did not need to use {{each}}.
The sample on JSFiddle also shows how you can have knockout render the template for you using the template binding. That way you do not have to make the .tmpl call at all.
Hope this helps.