Knockout and MVC Collection Binding - asp.net-mvc

Question

Im trying to get started with Knockout in MVC and managed to get the normal binding/mapping working, however I am stuck when it comes to collections. So far I have the following code:
public class TestViewModel
{
public TestViewModel()
{
Persons = new List<Person>();
}
public List<Person> Persons { get; set; }
}
public class Person
{
public Person()
{
}
public string Name { get; set; }
public string Surname { get; set; }
public List<string> Children { get; set; }
}
cshtml code:
<h2>People</h2>
<div data-bind="template: { name: 'person-template', foreach: persons }"></div>
<script type="text/html" id="person-template">
<ul>
<li>
<div><span data-bind="text: name"/> <span data-bind="text: surname"/> has <span data-bind='text: children().length'/></div>
<ul data-bind="foreach: children">
<li><span data-bind="text: $data"> </span></li>
</ul>
</li>
</ul>
</script>
<script type="text/javascript">
var TestModel = function(model) {
var self = this;
self.persons = ko.observableArray(ko.utils.arrayMap(model.Persons, function(person) {
var per = new Person(person);
return per;
}));
};
var Person = function(person) {
var self = this;
self.Name = ko.observable(person.Name);
self.Surname = ko.observable(person.Surname);
self.Children = ko.observableArray(person.Children);
};
$(function() {
var data = #(Html.Raw(Json.Encode(Model)));
ko.applyBindings(new TestModel(data));
});
</script>
The problem I am having is not sure if the mapping is done well or if there is a problem with the output for the template.
Thanks

Answer 1

Issue was with case-sensitivity. This is the correct template
<script type="text/html" id="person-template">
<ul>
<li>
<div><span data-bind="text: Name"/> <span data-bind="text: Surname"/> has <span data-bind='text: Children().length'/></div>
<ul data-bind="foreach: Children">
<li><span data-bind="text: $data"> </span></li>
</ul>
</li>
</ul>
</script>