<div class="menu departments">
<h4 id="test">Departments</h4>
<ul id="ulRootMenu" data-bind="template: {name:'mnuRoot', foreach: viewMenu}">loading...</ul>
</div>
<script type="text/html" id="mnuRoot">
<li data-bind="attr:{class:LiClass}">
<a data-bind="text: LinkText, attr:{class:LiClass, href:LinkHref}"></a>
<ul data-bind="template: {name:'l2', foreach: SubMenu}, attr:{class: UlClass}"></ul>
</li>
</script>
<script type="text/html" id='l2'>
<li data-bind="attr:{class: LiClass}"><a data-bind=" text: LinkText,attr:{href:LinkHref}"></a>
<ul data-bind="template: {name:'l2', foreach: SubMenu}, attr:{class: UlClass}"></ul>
</li>
</script>
</div>
Json Snippit (only one root item, but two "SubMenu" items each with two "SubMenu" items.)
[{
"LinkText": "Furniture",
"LinkHref": "/Catalog/Department.aspx?Dimension=1000\u0026DimensionValue=10001",
"LinkTitle": "Navigate to: Furniture",
"LiClass": "top-level level0 parent",
"UlClass": "submenu level1",
"HasChildren": true,
"SubMenu": [{
"LinkText": "Accent Furniture",
"LinkHref": "/Catalog/Category.aspx?Dimension=10001\u0026DimensionValue=11004",
"LinkTitle": null,
"LiClass": "level1 parent",
"UlClass": "submenu level2",
"HasChildren": true,
"SubMenu": [{
"LinkText": "Accent Chest",
"LinkHref": "/Catalog/Category.aspx?Dimension=11004\u0026DimensionValue=11005",
"LinkTitle": null,
"LiClass": "level3",
"UlClass": null,
"HasChildren": false,
"SubMenu": null
},
{
"LinkText": "Accent Tables",
"LinkHref": "/Catalog/Category.aspx?Dimension=11004\u0026DimensionValue=11006",
"LinkTitle": null,
"LiClass": "level3",
"UlClass": null,
"HasChildren": false,
"SubMenu": null
}]
},
{
"LinkText": "Bedroom",
"LinkHref": "/Catalog/Category.aspx?Dimension=10001\u0026DimensionValue=10259",
"LinkTitle": null,
"LiClass": "level1 parent",
"UlClass": "submenu level2",
"HasChildren": true,
"SubMenu": [{
"LinkText": "Accent Mirrors",
"LinkHref": "/Catalog/Category.aspx?Dimension=10259\u0026DimensionValue=10959",
"LinkTitle": null,
"LiClass": "level3",
"UlClass": null,
"HasChildren": false,
"SubMenu": null
},
{
"LinkText": "Armoires",
"LinkHref": "/Catalog/Category.aspx?Dimension=10259\u0026DimensionValue=10260",
"LinkTitle": null,
"LiClass": "level3",
"UlClass": null,
"HasChildren": false,
"SubMenu": null
}]
}]
}]
<script type="text/javascript">
GetMenu(); //Call the Function which gets all records using ajax call
var viewMenu;
function GetMenu() {
$.ajax({
type: "GET",
url: "/Services/NavigationMenuService.asmx/GetNavigationMenu",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnMenuSuccess,
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}
function OnMenuSuccess(data)
{
var d = JSON.parse(data.d);
viewMenu = ko.observableArray(d);
ko.applyBindings(viewMenu, document.getElementById("ulRootMenu"));
}
</script>