looping collection in knockoutjs in to ul - asp.net-mvc

Question

I have json collection like this
0: {FamilyDetailId:1, Name:Daniel, GenderId:1, Dob:/Date(1375554600000)/,…}
1: {FamilyDetailId:3, Name:Askar, GenderId:1, Dob:/Date(1375554600000)/,…}
var employeeFamilyModel;
function bindModel(data) {
employeeFamilyModel = ko.mapping.fromJS(data);
ko.applyBindings(employeeFamilyModel, document.getElementById("collapseOne"));
}
function loadData (employeeGuid) {
$.ajax({
url: "/HumanResource/EmployeeProfile/EmployeeProfileFamily?employeeGuid=" + employeeGuid,
type: 'post',
contentType: 'application/json',
success: function (result) {
bindModel(result);
}
});
};
view
<ul data-bind="foreach: employeeFamilyModel">
<li data-bind="text: Name"></li>
</ul>
my problems is to display each collection in new UL list
ex :
<ul>
<li> Name: Daniel </li>
</ul>
<ul>
<li> Name: Askar </li>
</ul>
how to achieve this in knockoutjs ?

Answer 1

Everything you have inside ko foreach block will be repeated like foreach loop. And everything you have in ko text will just output without any element around.
<!-- ko foreach: employeeFamilyModel -->
<ul>
<li>Name: <!--ko text: Name--><!--/ko--></li>
</ul>
<!-- /ko -->

Answer 2

To elaborate, you simply need to move your foreach binding 'up' a level, so that the <ul> is included for each data element in your view model.
JS:
employeeFamily = ko.observableArray([{Name: 'John Doe', Owner: 'John'},
{Name: 'Jane Doe', Owner: 'Jane'}])
ko.applyBindings(employeeFamily, document.getElementById("collapseOne"));
Html:
<div id = 'collapseOne' data-bind="foreach: employeeFamily">
<label data-bind="text: 'This list belongs to ' + $data.Owner"></label>
<ul>
<li data-bind="text: $data.Name"></li>
</ul>
</div>
Result:
This list belongs to John
John Doe
This list belongs to Jane
Jane Doe
I added the owner attribute to emphasize that each <ul> was bound to a different $data element. See JSFiddle example